المشاركات 11,551 |
+التقييم 321 |
تاريخ التسجيل Jul 2015 |
الاقامة فى الدنيا |
نظام التشغيل windows 8 |
رقم العضوية 18 |
<xen:require css="message_user_info.css" /> <div class="messageUserInfo" itemscope="itemscope" itemtype="http://data-vocabulary.org/Person"> <div class="messageUserBlock"> <xen:hook name="message_user_info_avatar" params="{xen:array 'user={$user}', 'isQuickReply={$isQuickReply}'}"> <div class="imgholder"> <div class="outer1 circle"></div> <div class="outer2 circle"></div> <figure> <figcaption class="caption"><xen:username user="$user" itemprop="name" rich="true" /></figcaption> </figure> <xen:avatar user="$user" size="m" img="true" /> <figcaption class="caption"> <!-- slot: message_user_info_text --> </div> </xen:hook> <xen:if is="!{$isQuickReply}"> <xen:hook name="message_user_info_text" params="{xen:array 'user={$user}', 'isQuickReply={$isQuickReply}'}"> <h3 class="userText"> <xen:if hascontent="true"><em class="userTitle" itemprop="title"><xen:contentcheck>{xen:helper userTitle, $user, 1, 1}</xen:contentcheck></em></xen:if> {xen:helper userBanner, $user, 'wrapped'} <!-- slot: message_user_info_text --> </h3> </xen:hook> <xen:if hascontent="true"> <div class="extraUserInfo"> <xen:contentcheck> <xen:hook name="message_user_info_extra" params="{xen:array 'user={$user}', 'isQuickReply={$isQuickReply}'}"> <xen:if is="@messageShowRegisterDate AND {$user.user_id}"> <dl class="pairsJustified"> <dt>{xen:phrase joined}:</dt> <dd>{xen:date $user.register_date}</dd> </dl> </xen:if> <xen:if is="@messageShowMessageCount AND {$user.user_id}"> <dl class="pairsJustified"> <dt>{xen:phrase messages}:</dt> <dd><a href="{xen:link search/member, '', 'user_id={$user.user_id}'}" class="concealed" rel="nofollow">{xen:number $user.message_count}</a></dd> </dl> </xen:if> <xen:if is="@messageShowTotalLikes AND {$user.user_id}"> <dl class="pairsJustified"> <dt>{xen:phrase likes_received}:</dt> <dd>{xen:number $user.like_count}</dd> </dl> </xen:if> <xen:if is="@messageShowTrophyPoints AND {$user.user_id}"> <dl class="pairsJustified"> <dt>{xen:phrase trophy_points}:</dt> <dd><a href="{xen:link 'members/trophies', $user}" class="OverlayTrigger concealed">{xen:number $user.trophy_points}</a></dd> </dl> </xen:if> <xen:if is="@messageShowGender AND {$user.gender}"> <dl class="pairsJustified"> <dt>{xen:phrase gender}:</dt> <dd itemprop="gender"><xen:if is="{$user.gender} == 'male'">{xen:phrase male}<xen:else />{xen:phrase female}</xen:if></dd> </dl> </xen:if> <xen:if is="@messageShowOccupation AND {$user.occupation}"> <dl class="pairsJustified"> <dt>{xen:phrase occupation}:</dt> <dd itemprop="role">{xen:string censor, $user.occupation}</dd> </dl> </xen:if> <xen:if is="@messageShowLocation AND {$user.location}"> <dl class="pairsJustified"> <dt>{xen:phrase location}:</dt> <dd><a href="{xen:link 'misc/location-info', '', 'location={xen:string censor, $user.location, '-'}'}" target="_blank" rel="nofollow" itemprop="address" class="concealed">{xen:string censor, $user.location}</a></dd> </dl> </xen:if> <xen:if is="@messageShowHomepage AND {$user.homepage}"> <dl class="pairsJustified"> <dt>{xen:phrase home_page}:</dt> <dd><a href="{xen:string censor, $user.homepage, '-'}" rel="nofollow" target="_blank" itemprop="url">{xen:string censor, $user.homepage}</a></dd> </dl> </xen:if> </xen:hook> <xen:if is="@messageShowCustomFields AND {$user.customFields}"> <xen:hook name="message_user_info_custom_fields" params="{xen:array 'user={$user}', 'isQuickReply={$isQuickReply}'}"> <xen:foreach loop="$userFieldsInfo" key="$fieldId" value="$fieldInfo"> <xen:if is="{$fieldInfo.viewable_message}"> <xen:if hascontent="true"> <dl class="pairsJustified userField_{$fieldId}"> <dt>{xen:helper userFieldTitle, $fieldId}:</dt> <dd><xen:contentcheck>{xen:helper userFieldValue, $fieldInfo, $user, {$user.customFields.{$fieldId}}}</xen:contentcheck></dd> </dl> </xen:if> </xen:if> </xen:foreach> </xen:hook> </xen:if> </xen:contentcheck> </div> </xen:if> </xen:if> <span class="arrow"><span></span></span> </div> </div>
/*FX effect avatar Body */ .imgholder { height: 81px; margin: 44px 30px; } /* thumbnails style */ .imgholder img{ position:absolute; left:0; top:0; width:120px; height:120px; z-index:5; border-radius:100px; -moz-border-radius:100px; -webkit-border-radius:100px; opacity:0.3; filter: alpha(opacity = 30); box-shadow:0 0 5px #000; -moz-box-shadow:0 0 5px #000; -webkit-box-shadow:0 0 5px #000; transform: scale(0.5,0.5); -ms-transform: scale(0.5,0.5); -moz-transform: scale(0.5,0.5); -webkit-transform: scale(0.5,0.5); transition: opacity 1s, transform 1s ease-in-out 0.3s; -moz-transition: opacity 1s, -moz-transform 1s ease-in-out 0.3s; -webkit-transition: opacity 1s, -webkit-transform 1s ease-in-out 0.3s; } .imgholder:hover img{ opacity:1; filter: alpha(opacity = 100); transform: scale(1,1); -ms-transform: scale(1,1); -moz-transform: scale(1,1); -webkit-transform: scale(1,1); } .imgholder figcaption{ position:absolute; left:48px; top:40%; width:185px; color:#004E87; font-weight:bold; text-shadow:-1px -1px 0 #fff; z-index:4; transition: top 0.5s ease-out; -moz-transition: top 0.5s ease-out; -webkit-transition: top 0.5s ease-out; } .imgholder:hover figcaption{ top:20%; } /* decorations style */ .imgholder .circle{ position:absolute; border-radius:100px; -moz-border-radius:100px; -webkit-border-radius:100px; } .imgholder .outer1{ top:-8px; left:-8px; width:120px; height:120px; z-index:2; border:8px solid; border-color:#DEEBFC; box-shadow:0 0 3px #AFD3FF; -moz-ox-shadow:0 0 3px #AFD3FF; -webkit-box-shadow:0 0 3px #AFD3FF; background: #ffffff; background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #e2efff 100%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ffffff), color-stop(100%,#e2efff)); background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%); background: -o-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%); background: -ms-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%); background: radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e2efff',GradientType=1 ); transform:rotate(90deg); -ms-transform:rotate(90deg); -moz-transform:rotate(90deg); -webkit-transform:rotate(90deg); transition: transform 1.8s ease-in-out, box-shadow 1s ease-out, border-color 1.5s; -moz-transition: -moz-transform 1.8s ease-in-out, -moz-box-shadow 1s ease-out, border-color 1.5s; -webkit-transition: -webkit-transform 1.8s ease-in-out, -webkit-box-shadow 1s ease-out, border-color 1.5s; } .imgholder:hover .outer1{ border-color:#0088EA #7FC9FF #0088EA #7FC9FF; box-shadow:0 0 10px #0285E2; -moz-box-shadow:0 0 10px #0285E2; -webkit-box-shadow:0 0 10px #0285E2; transform:rotate(-10deg); -ms-transform:rotate(-10deg); -moz-transform:rotate(-10deg); -webkit-transform:rotate(-10deg); } .imgholder .outer2{ top:-18px; left:-18px; width:136px; height:136px; z-index:1; border:10px solid; border-color: #D6E5FC #9BC8FF #D6E5FC #9BC8FF; box-shadow:0 0 20px #8EB9FF; -moz-box-shadow:0 0 20px #8EB9FF; -webkit-box-shadow:0 0 20px #8EB9FF; opacity:0; filter: alpha(opacity = 0); transform: scale(1.3,1.3) rotate(180deg); -ms-transform: scale(1.3,1.3) rotate(180deg); -moz-transform: scale(1.3,1.3) rotate(180deg); -webkit-transform: scale(1.3,1.3) rotate(180deg); transition: opacity 0.5s, transform 0.7s ease-out; -moz-transition: opacity 0.5s, -moz-transform 0.7s ease-out; -webkit-transition: opacity 0.5s, -webkit-transform 0.7s ease-out; } .imgholder:hover .outer2{ opacity:0.9; filter: alpha(opacity = 90); transform: scale(1,1) rotate(-10deg); -ms-transform: scale(1,1) rotate(-10deg); -moz-transform: scale(1,1) rotate(-10deg); -webkit-transform: scale(1,1) rotate(-10deg); } .imgholder figcaption { color: #004E87; font-weight: bold; left: 7px; position: absolute; text-shadow: 0 0 0 rgba(0, 0, 0, 0), -1px -1px 0 #FFFFFF; top: 153px; transition: top 0.5s ease-out 0s; width: 185px; z-index: 4; } /*FX effect avatar Body */
اضافة رد
|
اضافة تأثير على الصورة الرمزية بشكل رائع لمنتدى الزين فورو xenforo
|
الموضوع | كاتب الموضوع | المنتدى | مشاركات | آخر مشاركة |
اضافة تأثير وميض على الصورة الرمزية للاعضاء - زين فورو | ahmedkhalifa | ركن شروحات الزين فورو XENFORO | 1 | 05-13-2020 06:20 PM |
[ شرح ] : شرح خاصية متواجد وغير متواجد في زاوية الصورة الرمزية للمنتديات Xenforo 2 الزين فورو الجيل الثانى | 14SAT | ركن شروحات الزين فورو XENFORO | 25 | 01-18-2019 10:35 PM |
[ BBcode] : إضافة تأثير على الصورة الرمزية عند تمرير الماوس xenforo 2 | maaidni | ركن شروحات الزين فورو XENFORO | 3 | 11-14-2018 11:57 AM |
خاصية متواجد وغير متواجد في زاوية الصورة الرمزية للمنتديات Xenforo 1 الزين فورو الجيل الاول | azert120 | ركن مشاكل وطلبات الزين فورو XENFORO | 3 | 07-26-2018 10:57 PM |
قالب التوقيع الخاص باسكريبت الزين فورو بشكل جديد و حصرى لمنتدى هيلبرنت | abo-karim | ركن شروحات الزين فورو XENFORO | 6 | 06-13-2018 07:08 PM |