بادئ الموضوع تاريخ البدء
  • المشاهدات 215
  • الردود 1
الحالة
مغلق و غير مفتوح للمزيد من الردود.

Alrajabane

^_^
وّأِحُدّ مًنُ أٌلِنُأًسُ
إنضم
2016 - 8 - 7
المشاركات
2,688
مستوى التفاعل
226
النقاط
1,795
الإقامة
السعودية
الموقع الالكتروني
🔗
السلام عليكم ورحمه الله وبركاته

[JUSTIFY]اليوم راح نتعلم كيفية عمل تاثير عى الصورة الشخصية فى الموضوع لـ الزين فورو [/JUSTIFY]
[JUSTIFY][توافق الكود]: تم تجربته على جميع نسخ الزين فورو وصولا الى XF1.5.14[/JUSTIFY]

اليكم الصورة

Video_2017-11-23_175441.gif
طريقة العمل
[JUSTIFY]ابحث فى القوالب عن EXTRA.css[/JUSTIFY]
[JUSTIFY]فى الاستايل اللى تريد تعدل علية [/JUSTIFY]
[JUSTIFY]وضع هذا الكود اسفلة[/JUSTIFY]

PHP:
/*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 */
وبعدها
استبدل message_user_info بالكود التالي


PHP:
<xen:require css="message_user_info.css" />

<div class="messageUserInfo" itemscope="itemscope" itemtype="http://data-vocabulary.org/Person">
<div class="messageUserBlock {xen:if $user.isOnline, online}">
    <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>

  <xen:avatar user="$user" size="m" img="true" />

  <!-- 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:username user="$user" itemprop="name" rich="true" />
       <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} AND ({$fieldInfo.display_group} != 'contact' OR {$user.allow_view_identities} == 'everyone' OR ({$user.allow_view_identities} == 'members' AND {$visitor.user_id}))">
             <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>
 

المرفقات

الحالة
مغلق و غير مفتوح للمزيد من الردود.


كلمة المدير

جميع المواضيع والمشاركات المكتوبة تعبّر عن وجهة نظر صاحبها ,, ولا تعبّر بأي شكل من الاشكال عن وجهة نظر إدارة المنتدى .

تواصل مع فريق العمل

  • Saudi Arabia , RD

  • 966-550412399

  • support@hr7xx.net

  • www.hr7xx.net

عن حبر نت | HR7XX

مجتمع عربي يهدف لنقاش العام وكذلك الترفيه والمسابقات كما يجمع المنتدى العديد من الأقسام المفيدة للمستخدم .

تابعنا على المواقع الاجتماعية


إتصل بنا

 

أعلى

خيارات الاستايل

تلوين الاقسام
خلفية المنتدى
نوع الخط
جدول المنتديات
تمديد المنتدى
فصل الأقسام
إخفاء السايدبار
حجم الخط
الصورة الرمزية
بيانات العضو
إخفاء التواقيع

إرجاع خيارات الإستايل