منتديات تقنيات
يسعدنا تسجيلكم بالمنتدى اهلا بكم


كود css اشكال مختلفه لعارضة المنتدى

استعرض الموضوع السابق استعرض الموضوع التالي اذهب الى الأسفل

كود css اشكال مختلفه لعارضة المنتدى

مُساهمة من طرف JAR7 في 20/11/16, 01:25 am

كود css اشكال مختلفه لعارضة المنتدى
كود css اشكال مختلفه لعارضة المنتدى
السلام عليكم ورحمة الله وبركاته
اقدم لكم اكواد css توضع بورقة css من خلال لوحة الادارة. مظهر المنتدى.
صور والوان. الوان. ورقة css
وضع الكود مناسب الذي تريدة لشكل عارضة نبدا بسم الله اول شكل

https://i39.servimg.com/u/f39/16/63/75/54/result21.jpg
الكود
الرمز:

/*** BARRA DE FERRAMENTAS COREDANCE - FÓRUM DOS TEMAS HTTP://temas.forumeiros.net ***/
div#fa_toolbar {
background-color: #359AFF;
border-radius: 0 0 30px 45px;
box-shadow: 0 0 4px #000;
margin: auto;
width: 98%;
}

div#fa_toolbar div, div#fa_toolbar span {
    margin: 0 15px;
}

#fa_notifications, #fa_welcome {
transition-duration: 1s !important;
-webkit-transition-duration: 1s !important;
}

#fa_notifications:hover, #fa_welcome:hover {
background-color: #FFF;
color: #359AFF !important;
transition-duration: 1s !important;
-webkit-transition-duration: 1s !important;
}

ul#fa_menulist {
border-radius: 4px !important;
border-bottom: 1px solid #359AFF !important;
border-left: 1px solid #359AFF !important;
border-right: 1px solid #359AFF !important;
background-image: url(http://illiweb.com/fa/optimisation_fdf/fr/bg_pannel.png);
background-position: center bottom;
background-repeat: repeat-x;
background-color: #E7F3FA !important;
}

.see_all {
  background-color: #0085FF !important;
}
/*** BARRA DE FERRAMENTAS COREDANCE - FÓRUM DOS TEMAS HTTP://temas.forumeiros.net ***/

الشكل الثاني ..

https://i58.servimg.com/u/f58/15/88/72/83/result78.jpg
الكود
الرمز:

/* BARRA DE FERRAMENTAS PRATA */
#fa_toolbar {
left: 0px;
height: 30px;
background-color: #333333;
color: #FFFFFF;
font-family: Helvetica, Verdana, Arial;
font-size: 16px;
z-index: 999;
}
#fa_toolbar {
background-color: rgba(0,0,0,0)!important;
background-image: url(http://i57.servimg.com/u/f57/11/95/30/70/toolba10.png);
color: #000!important;
font-family: Helvetica,Verdana,Arial;
font-size: 16px;
height: 58px!important;
left: 0;
z-index: 999;
}
.fa_fix {
position: fixed !important;
position: absolute;
top: 0;
right: 0;
}
.fa_toolbar_XL_Sized {
min-width: 980px;
width: 100%;
}

#fa_right #fa_menu #fa_welcome, #fa_right.notification #fa_menu #fa_welcome, #fa_share_text, #fa_service {
color: black !important;
}

#fa_welcome, #fa_right #fa_notifications {
line-height: 30px;
padding: 0px 5px;
color: black !important;
}

#fa_menulist {
margin-top: 8px !important;
}
/* BARRA DE FERRAMENTAS PRATA FIM */
الشكل الثالث

http://i.imgur.com/XZrC1Nr.png
الكود css
الرمز:

div#fa_toolbar {
  -webkit-box-shadow: 0 2px 2px -2px rgba(0,0,0,.52);
  background-color: #3a5795;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAqCAMAAABFoMFOAAAAWlBMV…8/UxBxQDQuFwlpqgBZBq6+P+unVY1GnDgwqbD2zGz5e1lBdwvGGPE6OgAAAABJRU5ErkJggg==);
  background-position: 0 0;
  background-repeat: repeat-x;
  background-size: auto;
  border: 0;
  border-bottom: 1px solid #133783;
  min-width: 981px;
  z-index: 300;
  padding: 3px;
}
input#fa_textarea {
  margin-right: 0!important;
  margin-left: 12pc!important;
}
span#fa_share {
  display: none!important;
}
a#fa_welcome {
  display: none!important;
}
a#fa_notifications {
  position: relative;
  left: -8pc;
}

#fa_notifications{margin-right: 0px;width: 110px;text-align: right;position: relative;left: -6pc;background-image: url(https://fbstatic-a.akamaihd.net/rsrc.php/v2/yA/r/k_lAKDHNA3E.png);background-size: auto;background-position: -2px -640px;padding-right: 130px!important;z-index: 999;background-repeat: no-repeat;font-weight: 700;border-right: none!important;font-family:'helvetica neue', helvetica, arial, 'lucida grande', sans-serif!important;-webkit-font-smoothing: antialiased!important;margin-left: 2px!important;font-style: normal!important;text-transform: initial!important;text-decoration: initial!important;}
a#fa_magnifier {
  background-image: url(https://fbstatic-a.akamaihd.net/rsrc.php/v2/yM/r/nD48zLxSt0n.png)!important;
  background-position: 0 -354px!important;
  background-repeat: no-repeat!important;
  background-size: auto!important;
  height: 18px!important;
  top: 8px!important;
  width: 19px!important;
  margin-right: 0!important;
  margin-left: 0!important;
  left: 41pc!important;
  right: 0!important;
}
a#fa_hide {
  display: none!important;
}
span#fa_left {
  position: relative;
  left: 12pc;
}
input#fa_textarea {
  width: 22pc!important;
  padding: 1px!important;
  margin-top: 1px!important;
}
الشكل الرابع

http://image.prntscr.com/image/f321f22bccc54a39afbc5ee585afc8b3.png

الكود
الرمز:


#fa_search #fa_magnifier:hover {
background-color: #EBEBEB!important;
}  
#fa_right a.rightHeaderLink {
margin-left: 10px;
vertical-align: top;
line-height: 30px;
color: #FFFFFF;
border: 1px solid #1b7fcc;
padding: 0px 5px 0px 5px;
background: #1b7fcc;
color: #fff;
margin-top: 10px;
font-weight: bold;
font-size: 11px;  
}
#fa_right {
float: right;
font-size: 14px;
margin-right: 30px;
}
#fa_toolbar #fa_right #notif_list {
font-size: 11px;
display: none;
position: absolute;
list-style-type: none;
margin: 0;
padding: 0;
background: #fff!important;
border: 2px solid #dbdbdb!important;
border-top: 0px solid #FFFFFF !important;  
z-index: 999;
margin-top: 8px !important;
}
#fa_toolbar #fa_right #notif_list li.see_all {
color: #666;
background-color: #dbdbdb !important;
padding: 0.7em !important;
text-align: left;
}
#fa_toolbar #fa_right #notif_list li.see_all a {
background-image: url(http://i.imgur.com/q8KOgBu.png);
background-position: 0% 50%;
background-repeat: no-repeat;
padding-left: 10px;
color: #666!important;
width: 140px !important;
}
#fa_toolbar #fa_right #fa_notifications.unread #notif_unread {
background-image: url(http://i.imgur.com/YgXineA.png);
background-position: 15px 0px;
background-repeat: no-repeat;
display: inline;
padding: 7px 20px 7px 0;
color: #666;
}
#fa_menulist {
display: none;
position: absolute;
list-style-type: none;
margin: 0px;
padding: 0px 10px;
min-width: 175px;
width: auto;
line-height: 32px;
z-index: 999;
margin-top: 8px !important;
border-top: 0px solid #FFFFFF !important;  
background: #fff !important;
border: 2px solid #dbdbdb !important;
}
#fa_toolbar #fa_hide {
display: none !important;
}  
#fa_icon, #fa_toolbar #fa_service {
color: #666 !important;
}
#fa_search #fa_magnifier {
background: #f0f0f0 !important;
background-image: url(http://i.imgur.com/fC96pEG.png) !important;
background-repeat: no-repeat !important;
background-position: 40% 40% !important;
border: 1px solid #c6c6c6 !important;
box-shadow: 0 1px 0 rgba(0,0,0,0.10) !important;
position: absolute !important;
height: 24px !important;
margin-top: 8px !important;
width: 50px !important;
margin-left: 300px !important;
}
 
#fa_share {
margin-left: 20px;
font-size: 16px;
line-height: 30px !important;
display: none !important;
}
#fa_right #fa_notifications, #fa_welcome {
background: #f8f8f8;
border: 1px solid #d3d3d3;
box-shadow: 0 1px 0 rgba(0,0,0,0.05);
color: #333!important;
margin-top: 10px;
font-size: 11px;
font-weight: 700;
}
#fa_right #fa_menu #fa_welcome, #fa_right.notification #fa_menu #fa_welcome {
background: #f8f8f8;
border: 1px solid #d3d3d3;
box-shadow: 0 1px 0 rgba(0,0,0,0.05);
color: #333!important;
margin-top: 10px;
background-image: url(http://i.imgur.com/6vtRpv0.png);
background-repeat: no-repeat;
background-position: 100% 40%;
padding-right: 30px;
font-weight: bold;
font-size: 11px;
}
 
#fa_search #fa_textarea {
text-indent: 10px !important;  
border: 1px solid #ccc!important;
box-shadow: inset 0 1px 2px #eee!important;
height: 24px!important;
line-height: 24px!important;
margin-top: 8px!important;
padding: 0!important;
width: 300px!important;
border-radius: 0 !important;
}
#fa_left {
display: inline-block !important;
visibility: visible !important;
width: auto !important;
height: auto !important;
line-height: 30px !important;
margin-top: 10px;
}
#fa_toolbar {
left: 0px;
height: 50px !important;
color: #666 !important;
font-family: Helvetica, Verdana, Arial;
font-size: 16px !important;
z-index: 999;
background: #fff !important;
border-bottom: 2px solid #e8e8e8 !important;
}



JAR7
ادارة المنتدى


الجنس : انثى
عدد المساهمات : 2202
التقييم : 290
تاريخ التسجيل : 05/01/2016
اوسمتي : :10:10:10

معاينة صفحة البيانات الشخصي للعضو http://www.t3qnyiat.com

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: كود css اشكال مختلفه لعارضة المنتدى

مُساهمة من طرف JAR7 في 20/11/16, 01:26 am

نكمل الاشكال
الشكل الخامس للعارضة


http://image.prntscr.com/image/f321f22bccc54a39afbc5ee585afc8b3.png
الرمز:


div#fa_toolbar        {background-color: transparent !important;}
div#fa_toolbar a      {
color:#616161 !important;
display: inline;
list-style-type: none;
width: auto;
}
div#fa_toolbar span#fa_left a#fa_service {color:#000 !important;}
div#fa_toolbar span#fa_left  {
margin-right: 0px !important;
background-image: -webkit-linear-gradient( rgba(242, 242, 242, 0.9), rgba(222, 222, 222, 0.9));
background-color: rgb(231, 231, 231);
border-bottom: 1px solid #333;
padding-top: 3px;  
}
div#fa_toolbar div#fa_right  {
background-image: -webkit-linear-gradient( rgba(242, 242, 242, 0.9), rgba(222, 222, 222, 0.9));
background-color: rgb(231, 231, 231);
border-bottom: 1px solid #333;
border-left: 1px solid #333;
border-bottom-left-radius: 11px;
}
div#fa_toolbar span#fa_share {
background-image: -webkit-linear-gradient( rgba(242, 242, 242, 0.9), rgba(222, 222, 222, 0.9));
background-color: rgb(231, 231, 231);
border-bottom: 1px solid #333;
border-right: 1px solid #333;
border-bottom-right-radius: 11px;
padding-right: 4px;
padding-top: 3px;
margin-left: 0px !important;
}
div#fa_toolbar span#fa_share_text {display: none !important;}
div#fa_toolbar div#fa_search    {display: none !important;}
#fa_toolbar #fa_right.notification #notif_list {
margin-left: -50px;
min-width: 200px;
left: auto !important;
right: 0px !important;
margin-right: -1px !important;
}
#fa_right #fa_notifications{
padding-top: 2px !important;
padding-bottom: 1px !important;
}
#fa_usermenu {text-align: left !important;}
#fa_menulist {
  margin-left: -1px !important;
  min-width: 300px !important;
  padding-left: 110px !important;
}
#fa_toolbar #fa_right #notif_list li.see_all {background-color: #fff !important;}
#fa_menulist a:link, #fa_menulist a:visited, #fa_menulist a {
display: block;
height: 26px;
line-height: 26px;
padding: 0px;
color: #616161 !important;
text-decoration: none;
text-shadow: none;
}
#fa_menulist li {padding:0px 10px !important;}
#fa_menulist li:hover {
  color:#fff;
  text-shadow:0 1px 0 #000;
  padding:0 10px;
  background-color: rgb(231, 231, 231);}
الشكل السادس

https://i76.servimg.com/u/f76/16/76/93/88/tlbr10.png
الرمز:

/* -- تغيير صور و تصميم عارضة المنتدى By M!Z0 PR0 -- */

#fa_toolbar,#fa_toolbar_hidden {
background:#0AC url(http://i39.servimg.com/u/f39/16/76/93/88/th-x10.png) repeat-x!important;}
#fa_toolbar,#fa_right,#fa_left,#fa_share {font:11px Tahoma!important;}
#fa_notifications,#fa_welcome,#fa_left,#fa_share_text {
font:bold 12px Tahoma!important;line-height:30px!important;text-shadow:1px 1px 0 #06A;}
#fa_right.welcome #fa_welcome,#fa_right.notification #fa_notifications {text-shadow:none;}
#fa_toolbar #fa_magnifier,#fa_toolbar #fa_hide,#fa_toolbar_hidden #fa_show,#fa_toolbar #fa_rss
{background-image:url('http://i39.servimg.com/u/f39/16/76/93/88/toolba10.png')!important;}
#fa_toolbar #fa_fb,#fa_toolbar #fa_twitter,#fa_toolbar #fa_gp,#fa_toolbar #fa_mail,#fa_toolbar #fa_rss
{background-image:url('http://i39.servimg.com/u/f39/16/76/93/88/toolba10.png')!important;}
#fa_toolbar #fa_rss {background-size:auto!important;background-position:0 0;}
/* -- M!Z0 PR0 --*/

شكل السابع


الكود
باللون الاخضر
الرمز:

#fa_right #fa_menu #fa_welcome:hover, #fa_right #fa_notifications:hover, #fa_right a.rightHeaderLink:hover, #fa_right.welcome #fa_menu #fa_welcome, #fa_toolbar > #fa_right.notification > #fa_notifications {
    background-color: #88BA56!important;
    border-color: #88BA56!important;
    color: #FFF!important;
}
#notif_list li.see_all {
    background: #88BA56!important;
}
#fa_right #notif_list {
    background: #FFF!important;
    border: 1px solid #DDD!important;
    border-radius: 3px;
    box-shadow: 0 6px 12px rgba(0,0,0,0.175);
    margin-top: 18px!important;
}
#notif_list:before {
    content: url('http://i18.servimg.com/u/f18/18/21/41/30/arrow11.png');
    position: absolute;
    right: 10%;
    top: -10px;
}
#fa_menulist {
    display: none;
    position: absolute;
    list-style-type: none;
    margin: 0px;
    padding: 0px 10px;
    background-color: #FFFFFF;
    min-width: 175px;
    width: auto;
    border: 1px solid #333333;
    line-height: 32px;
    border-top: 0px solid #FFFFFF;
    z-index: 999;
}
#fa_menulist, #fa_toolbar #fa_right #notif_list {
    background: #FFF!important;
    border: 1px solid #DDD!important;
    border-radius: 3px;
    box-shadow: 0 6px 12px rgba(0,0,0,0.175);
    margin-top: 18px!important;
}
#fa_toolbar {
    border-bottom: 1px solid #CCC;
}
#fa_menulist:before, #fa_toolbar #fa_right #notif_list:before {
    content: url('http://i18.servimg.com/u/f18/18/21/41/30/arrow11.png');
    position: absolute;
    right: 10%;
    top: -10px;
}
#fa_toolbar #live_notif .fa_notification {
    background: #FFF!important;
    border: 1px solid #DDD;
    border-bottom-width: 2px;
    border-radius: 3px!important;
    box-shadow: 0 3px 12px rgba(0,0,0,0.175);
    margin-top: 5px;
    opacity: 1!important;
}
#fa_toolbar #live_notif .fa_notification .content {
    padding-left: 40px;
    display: inline-block;
    background-image: url('http://www.illiweb.com/fa/notifications/notifications.png');
    background-repeat: no-repeat;
    height: 32px;
    font-size: 11px;
    color: #fff;
    overflow: hidden;
}
#fa_toolbar #live_notif .fa_notification .content {
    background-image: url(http://i18.servimg.com/u/f18/16/89/96/68/notifi10.png)!important;
    color: #555!important;
}
#fa_toolbar :link, #fa_toolbar :visited {
    color: #88BB55;
}
#fa_hide, #fa_show {
    background: url(http://i21.servimg.com/u/f21/19/34/58/13/untitl12.png) no-repeat 0 0 transparent!important;
}
#fa_right #fa_hide {
    background-color: transparent!important;
    border: none!important;
    margin-top: 0!important;
    padding: 0!important;
    transition: none!important;
}
#fa_hide:hover {
    background-position: -30px 0!important;
}
#fa_show {
    background-position: -60px 0!important;
}
#fa_show:hover {
    background-position: -90px 0!important;
}
#fa_right #fa_menu #fa_welcome, #fa_right #fa_notifications, #fa_right a.rightHeaderLink {
    background-color: transparent!important;
    border: 1px solid #88BA56!important;
    border-radius: 3px!important;
    color: #88BA56!important;
    font-size: 11px!important;
    font-weight: 700!important;
    line-height: 22px!important;
    margin-top: 3px!important;
    padding: 0 6px!important;
    text-decoration: none!important;
    transition: 200ms;
}

/* search bar */
#fa_search { position:relative }

#fa_search #fa_magnifier {
  background:url('http://i21.servimg.com/u/f21/18/21/41/30/search10.png') no-repeat 50% 50% #1860DB !important;
  border:1px solid #88BA56;
  border-left:none;
  border-radius:0 3px 3px 0;
  height:22px !important;
  width:22px !important;
  top:3px;
  right:0px;
}

#fa_search #fa_textarea {
    background: #88BA56!important;
    border: 1px solid #88BA56!important;
    border-radius: 3px 0 0 3px!important;
    color: #88BA56!important;
    cursor: text;
    font-size: 12px!important;
    height: 16px!important;
    line-height: 12px!important;
    margin-right: 23px!important;
    padding: 3px 0 3px 1px !important;
    transition: 300ms;
    width: 0!important;
}
#fa_search:hover #fa_textarea, #fa_search #fa_textarea:hover, #fa_search #fa_textarea:focus {
  color:#FFF !important;
  background: #FFF!important
  width:150px !important;
  padding:3px !important;
  outline:none;
}
#fa_search #fa_magnifier {
    background: url(http://i21.servimg.com/u/f21/18/21/41/30/search10.png) no-repeat 50% 50% #88BA56!important;
    border: 1px solid #88BA56;
    border-left: none;
    border-radius: 0 3px 3px 0;
    height: 22px!important;
    right: 0;
    top: 3px;
    width: 22px!important;
}
#fa_share a {
    background: url(http://i21.servimg.com/u/f21/18/21/41/30/fa_sha10.png) no-repeat 0 0 transparent!important;
    border-radius: 25px;
    height: 25px!important;
    margin: -2px 3px 0!important;
    width: 25px!important;
}
a#fa_fb {
    background-position: -50px 0!important;
}
a#fa_fb:hover {
    background-position: -75px 0!important;
}
a#fa_twitter {
    background-position: 0 0!important;
}
a#fa_twitter:hover {
    background-position: -25px 0!important;
}
a#fa_gp {
    background-position: -98px 0!important;
}
a#fa_gp:hover {
    background-position: -123px 0!important;
}
a#fa_mail {
    background-position: -150px 0!important;
}
a#fa_mail:hover {
    background-position: -175px 0!important;
}
a#fa_rss {
    background-position: -199px 0!important;
}
a#fa_rss:hover {
    background-position: -224px 0!important;
}
#fa_share a:hover:after {
    background: #88BA56;
    height: 25px;
    margin-left: 0;
    margin-top: 0;
    width: 25px;
}
#fa_share a:after {
    background: transparent;
    border-radius: 30px;
    content: ".";
    display: block;
    font-size: 0;
    height: 35px;
    margin-left: -5px;
    margin-top: -5px;
    position: absolute;
    transition: 250ms;
    width: 35px;
    z-index: -1;
}
شكل الثامن

وهنا باللون الابيض

الرمز:

#fa_right #fa_menu #fa_welcome:hover, #fa_right #fa_notifications:hover, #fa_right a.rightHeaderLink:hover, #fa_right.welcome #fa_menu #fa_welcome, #fa_toolbar > #fa_right.notification > #fa_notifications {
    background-color: #88BA56!important;
    border-color: #88BA56!important;
    color: #FFF!important;
}
#notif_list li.see_all {
    background: #88BA56!important;
}
#fa_right #notif_list {
    background: #FFF!important;
    border: 1px solid #DDD!important;
    border-radius: 3px;
    box-shadow: 0 6px 12px rgba(0,0,0,0.175);
    margin-top: 18px!important;
}
#notif_list:before {
    content: url('http://i18.servimg.com/u/f18/18/21/41/30/arrow11.png');
    position: absolute;
    right: 10%;
    top: -10px;
}
#fa_menulist {
    display: none;
    position: absolute;
    list-style-type: none;
    margin: 0px;
    padding: 0px 10px;
    background-color: #FFFFFF;
    min-width: 175px;
    width: auto;
    border: 1px solid #333333;
    line-height: 32px;
    border-top: 0px solid #FFFFFF;
    z-index: 999;
}
#fa_menulist, #fa_toolbar #fa_right #notif_list {
    background: #FFF!important;
    border: 1px solid #DDD!important;
    border-radius: 3px;
    box-shadow: 0 6px 12px rgba(0,0,0,0.175);
    margin-top: 18px!important;
}
#fa_toolbar {
    border-bottom: 1px solid #CCC;
}
#fa_menulist:before, #fa_toolbar #fa_right #notif_list:before {
    content: url('http://i18.servimg.com/u/f18/18/21/41/30/arrow11.png');
    position: absolute;
    right: 10%;
    top: -10px;
}
#fa_toolbar #live_notif .fa_notification {
    background: #FFF!important;
    border: 1px solid #DDD;
    border-bottom-width: 2px;
    border-radius: 3px!important;
    box-shadow: 0 3px 12px rgba(0,0,0,0.175);
    margin-top: 5px;
    opacity: 1!important;
}
#fa_toolbar #live_notif .fa_notification .content {
    padding-left: 40px;
    display: inline-block;
    background-image: url('http://www.illiweb.com/fa/notifications/notifications.png');
    background-repeat: no-repeat;
    height: 32px;
    font-size: 11px;
    color: #fff;
    overflow: hidden;
}
#fa_toolbar #live_notif .fa_notification .content {
    background-image: url(http://i18.servimg.com/u/f18/16/89/96/68/notifi10.png)!important;
    color: #555!important;
}
#fa_toolbar :link, #fa_toolbar :visited {
    color: #88BB55;
}
#fa_hide, #fa_show {
    background: url(http://i21.servimg.com/u/f21/19/34/58/13/untitl12.png) no-repeat 0 0 transparent!important;
}
#fa_right #fa_hide {
    background-color: transparent!important;
    border: none!important;
    margin-top: 0!important;
    padding: 0!important;
    transition: none!important;
}
#fa_hide:hover {
    background-position: -30px 0!important;
}
#fa_show {
    background-position: -60px 0!important;
}
#fa_show:hover {
    background-position: -90px 0!important;
}
#fa_right #fa_menu #fa_welcome, #fa_right #fa_notifications, #fa_right a.rightHeaderLink {
    background-color: transparent!important;
    border: 1px solid #FFF!important;
    border-radius: 3px!important;
    color: #FFF!important;
    font-size: 11px!important;
    font-weight: 700!important;
    line-height: 22px!important;
    margin-top: 3px!important;
    padding: 0 6px!important;
    text-decoration: none!important;
    transition: 200ms;
}

/* search bar */
#fa_search { position:relative }

#fa_search #fa_magnifier {
  background:url('http://i21.servimg.com/u/f21/18/21/41/30/search10.png') no-repeat 50% 50% #1860DB !important;
  border:1px solid #88BA56;
  border-left:none;
  border-radius:0 3px 3px 0;
  height:22px !important;
  width:22px !important;
  top:3px;
  right:0px;
}

#fa_search #fa_textarea {
    background: #88BA56!important;
    border: 1px solid #88BA56!important;
    border-radius: 3px 0 0 3px!important;
    color: #88BA56!important;
    cursor: text;
    font-size: 12px!important;
    height: 16px!important;
    line-height: 12px!important;
    margin-right: 23px!important;
    padding: 3px 0 3px 1px !important;
    transition: 300ms;
    width: 0!important;
}
#fa_search:hover #fa_textarea, #fa_search #fa_textarea:hover, #fa_search #fa_textarea:focus {
  color:#FFF !important;
  background: #FFF!important
  width:150px !important;
  padding:3px !important;
  outline:none;
}
#fa_search #fa_magnifier {
    background: url(http://i21.servimg.com/u/f21/18/21/41/30/search10.png) no-repeat 50% 50% #88BA56!important;
    border: 1px solid #88BA56;
    border-left: none;
    border-radius: 0 3px 3px 0;
    height: 22px!important;
    right: 0;
    top: 3px;
    width: 22px!important;
}
#fa_share a {
    background: url(http://i21.servimg.com/u/f21/18/21/41/30/fa_sha10.png) no-repeat 0 0 transparent!important;
    border-radius: 25px;
    height: 25px!important;
    margin: -2px 3px 0!important;
    width: 25px!important;
}
a#fa_fb {
    background-position: -50px 0!important;
}
a#fa_fb:hover {
    background-position: -75px 0!important;
}
a#fa_twitter {
    background-position: 0 0!important;
}
a#fa_twitter:hover {
    background-position: -25px 0!important;
}
a#fa_gp {
    background-position: -98px 0!important;
}
a#fa_gp:hover {
    background-position: -123px 0!important;
}
a#fa_mail {
    background-position: -150px 0!important;
}
a#fa_mail:hover {
    background-position: -175px 0!important;
}
a#fa_rss {
    background-position: -199px 0!important;
}
a#fa_rss:hover {
    background-position: -224px 0!important;
}
#fa_share a:hover:after {
    background: #88BA56;
    height: 25px;
    margin-left: 0;
    margin-top: 0;
    width: 25px;
}
#fa_share a:after {
    background: transparent;
    border-radius: 30px;
    content: ".";
    display: block;
    font-size: 0;
    height: 35px;
    margin-left: -5px;
    margin-top: -5px;
    position: absolute;
    transition: 250ms;
    width: 35px;
    z-index: -1;
}


دمتم بخير



JAR7
ادارة المنتدى


الجنس : انثى
عدد المساهمات : 2202
التقييم : 290
تاريخ التسجيل : 05/01/2016
اوسمتي : :10:10:10

معاينة صفحة البيانات الشخصي للعضو http://www.t3qnyiat.com

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: كود css اشكال مختلفه لعارضة المنتدى

مُساهمة من طرف omarpop23 في 20/11/16, 10:06 am

تسلم ايدك راااائع

omarpop23
ادارة المنتدى


الجنس : ذكر
عدد المساهمات : 21
التقييم : 24
تاريخ الميلاد : 04/12/1994
تاريخ التسجيل : 11/04/2016
العمر : 22
الموقع : القاهرة
العمل/الترفيه : CSS , HTML and JQuery

معاينة صفحة البيانات الشخصي للعضو

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: كود css اشكال مختلفه لعارضة المنتدى

مُساهمة من طرف انمار في 21/11/16, 08:56 pm

اشكال غاية في الجمال تسلم ايدك يا مبدعه شكرا

انمار

الجنس : انثى
عدد المساهمات : 8
التقييم : 12
تاريخ التسجيل : 05/11/2016

معاينة صفحة البيانات الشخصي للعضو

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: كود css اشكال مختلفه لعارضة المنتدى

مُساهمة من طرف walid dz في 03/12/16, 01:24 pm

رائع جدا ممتاز

walid dz
عضو نشيط


الجنس : ذكر
عدد المساهمات : 90
التقييم : 20
تاريخ التسجيل : 11/04/2016

معاينة صفحة البيانات الشخصي للعضو

الرجوع الى أعلى الصفحة اذهب الى الأسفل

استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة

إنشاء حساب أو تسجيل الدخول لتستطيع الرد

تحتاج إلى أن يكون عضوا لتستطيع الرد.

انشئ حساب

يمكنك الانضمام لمنتديات تقنيات فعملية التسجيل سهله !


انشاء حساب جديد

تسجيل الدخول

اذا كنت مسجل معنا فيمكنك الدخول بالضغط هنا


تسجيل الدخول

 
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى