Like And Win VIP Hack
Click Like To WIN 30 Day VIP Hack

قائمة شخصية Profile

Home // Blog // قائمة شخصية Profile

 
Share Now And Win Free ViP HackShare on Facebook0Google+0Tweet about this on Twitter0
قائمة شخصية خاصة بتصميم مبهر لعرض بروفيلك للإستعمال الشخصي ، متكونة من
صورة وقائمة بتأثير ورقي سأقدم لكم الأكواد ولكم حرية الإستعمال إما أن
تضاف في صفحة أو في أداة ، أيضا ستجدون رابط تحميل الكود مجموع لإضافته
مباشرة كأداة 
تنويه : بإمكانك تصميم شخصيتك الكرتونية أنت أيضا بشكل احترافي عبر موقع : pickaface
تحميل الملف المرفق بالكود Html/Javascript
* الكود هو فقط لإظهار الأيقونات إذا كنت تتوفر عليه فلا داعي لإضافته ..  يوضع فوق </head>
<link href='//netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css' rel='stylesheet'/>
أكواد Css

.icon-heart:before {
content: "f004";
color: #F5D324;
}
ul, li,a {
    font-family: Electrolize,ge_ss_threeregular;
    font-size: 13px;
    text-decoration: none;
    color: #716E6E;
    margin: 0;
    padding: 0;
    list-style-type: none;
}

ul, li,a:hover{color: #444;}
.container {
    margin: 40px auto 0;
    width: 143px;
}

.profile-container {
    position: relative;
    width: 222px;
    float: right;
}

.profile {
    background: #f6f6f6;
    float: right;
    padding: 4px;
    border-radius: 3px;
    -o-border-radius: 3px;
    -ms-border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.avatar img {
    display: block;
    border-radius: 3px;
    -o-border-radius: 3px;
    -ms-border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}

.follow {
    margin: 4px 0 0 0;
}

.follow button {
    display: block;
    width: 100%;
    border: 0;
    background: #268cde;
    color: white;
    font-family: Electrolize,ge_ss_tvbold;
    font-size: 15px;
    padding: 7px 0;
    margin: 0;
    border-radius: 3px;
    -o-border-radius: 3px;
    -ms-border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    cursor: url(http://2.bp.blogspot.com/-IJ8uMvhlKVU/VFDoIGDIn3I/AAAAAAAAGio/K2vVTU7nX84/s320/chm.png),pointer;
-moz-transition: all .3s ease 0s;
}

.follow button i {
    font-size: 10px;
    color: #b9daf4;
}

.follow button:hover {
    background: #3096e8;
}

.follow button:active {
    background: #2085d6;
}

.profile-list {
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
    color: #767b7e;
    font-size: 13px;
    text-align: right;
}

.profile-list li {
    cursor: pointer;
    background: #ffffff;
    border-top: 1px solid #F2F2F2;
    padding: 15px 10px;
}

.profile-list li:last-child {  
    border-radius: 0 0 3px 3px;;
    -o-border-radius: 0 0 3px 3px;
    -ms-border-radius: 0 0 3px 3px;
    -moz-border-radius: 0 0 3px 3px;
    -webkit-border-radius: 0 0 3px 3px;
}

.profile-list li [class^="icon-"] {
    margin: 0 3px 0 0;
}


.profile-list .profile {
    border-radius: 3px 3px 0 0;
    position: relative;
}

.profile-list li {
    -webkit-transform-origin: 50% 0%;
    -o-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    -webkit-transform: perspective(250px) rotateX(-90deg);
    -o-transform: perspective(250px) rotateX(-90deg);
    transform: perspective(250px) rotateX(-90deg);
    -moz-box-shadow: 0px 2px 10px rgba(0,0,0,0.05);
}

.profile-list .first {
    -webkit-transition: 0.2s linear 0.8s;
    -o-transition: 0.2s linear 0.8s;
    transition: 0.2s linear 0.8s;
}

.profile-list .second {
    -webkit-transition: 0.2s linear 0.6s;
    -o-transition: 0.2s linear 0.6s;
    transition: 0.2s linear 0.6s;
}

.profile-list .third {
    -webkit-transition: 0.2s linear 0.4s;
    -o-transition: 0.2s linear 0.4s;
    transition: 0.2s linear 0.4s;
}

.profile-list .fourth {
    -webkit-transition: 0.2s linear 0.2s;
    -o-transition: 0.2s linear 0.2s;
    transition: 0.2s linear 0.2s;
}


.profile-container:hover .profile {
    border-radius: 3px 3px 0 0;
    -o-border-radius: 3px 3px 0 0;
    -ms-border-radius: 3px 3px 0 0;
    -moz-border-radius: 3px 3px 0 0;
    -webkit-border-radius: 3px 3px 0 0;
}

.profile-container:hover .profile-list li {
    -webkit-transform: perspective(350px) rotateX(0deg);
    -o-transform: perspective(350px) rotateX(0deg);
    transform: perspective(350px) rotateX(0deg);
    -webkit-transition: 0.2s linear 0s;
    -o-transition: 0.2s linear 0s;
    transition: 0.2s linear 0s;
}

.profile-container:hover .profile-list .second {
    -webkit-transition-delay: 0.2s;
    -o-transition-delay: 0.2s;
    transition-delay: 0.2s;
}

.profile-container:hover .profile-list .third {
    -webkit-transition-delay: 0.4s;
    -o-transition-delay: 0.4s;
    transition-delay: 0.4s;
}

.profile-container:hover .profile-list .fourth {
    transition-delay: 0.6s;
    -o-transition-delay: 0.6s;
    transition-delay: 0.6s;
} 

أكواد HTML

<div class="profile-container unfold">
<div class="profile">
<div class="avatar"><img src="http://i.imgur.com/3KQAIIw.png" /></div>
<div class="follow"><button><i class="icon-plus"></i><a href='#'target="_blank"> تابعني</button></div>
</div>
<ul class="profile-list">
    <li class="first"><a href="#" target="_blank">من أنا<i class="icon-user"></i></a></li>
    <li class="second"><a href="#" target="_blank">أعمالي<i class="icon-list-alt"></i></a></li>
    <li class="third"><a href="http://www.ar1web.com" target="_blank">مدونتي<i class="icon-time"></i></a></li>
     
    <li class="fourth"><a href="#" target="_blank">المفضلة<i class="icon-heart"></i></a></li>
</ul>
</div>

Related Post

إضافة محتوى مخفي في موضوع بسم الله الرحمن الرحيم ، بداية أسبوع موفقة للجميع .. عدت لكم مع إضافة جد مفيدة ورائعة لأصحاب قوالب بلوجر أيضا لمن لديهم مواضيع بكلمات تفوق الص...
إضافة صفحة الخطأ | الشكل الثاني... مع الشكل الثاني من إضافة صفحة الخطأ لقوالب بلوجر بتصميم لطيف وأنيق يجمع أيقونات الشبكات الإجتماعية ، ما فائدة صفحة الخطأ :تدور اهمية صفحة الخطأ ح...
قائمة شخصية Profile قائمة شخصية خاصة بتصميم مبهر لعرض بروفيلك للإستعمال الشخصي ، متكونة من صورة وقائمة بتأثير ورقي سأقدم لكم الأكواد ولكم حرية الإستعمال إما أن تضاف في صف...
افضل 10 تأثيرات Hover لصور تأثيرات الهوفر عديدة ومختلفة منها التأثيرات التي تطبق على الصور بإضافة إقرأ المزيد أو أزرار المشاركة عند مرور الموس على الصورة تظهر كالمثال في...
Share Now And Win Free ViP HackShare on Facebook0Google+0Tweet about this on Twitter0

0 Comments ON " قائمة شخصية Profile "
leave a response

*

Copyright © All Rights Reserved 2014→2017 To Add-Fast.CoM