مكتبة بأجمل الخلفيات الجاهزة للتصميم الجزء الأول


أهلا بكم زوار مدونتي الكرام اليوم أحظرة لكم مجموعتا من الخلفيات الخاهزة للتصميم بحزمتها الأولى وأتمنا أن تنال إعجابكم
لأني تعبت على تصميمها ولن أطيل عليكم وأترككم مع المعاينة لبعض منها .




والأن نأـي للتحميل تفضلو الرابط :  إضغط هنا لتحميل الخلفيات
ليست هناك تعليقات:

مكتبة بأرقى الإضافات الجزء الأول



    المكتبة الثانية التي تضم أرقى الإضافات بجزئها الثاني، كالعادة تكون هذه الإضافات للتزين الموقع وطبعا لها إفادة في أغلبيتها. كما أن الإضافات قد تنشر بصفحتنا على الفيسبوك بدون أن ننشر تدوينة لذا أنصحكم بالمتابعة قد تفوتون الكثير 😉 هاته الإضافات الأربعة مختلفة كليا عن بعضها ذات تصميم هادئ خفيف وجميل ولكي لا أكثر في الحديث عن شكلها أدعوكم للمعاينة المباشرة
    شرح  طريقة التركيب
    1 . من التخطيط أضف أداة Html/Javascript وضع بها كود الإضافة


    <style>
.ar1web_today_img:hover { opacity: .9; }
.ar1web_today_img img{width:100%;height:180px;align:justify;margin-bottom:13px}.ar1web_today_img a{font-size: 14px;
    font-family: Droid Arabic Kufi,Open Sans;
    line-height: 24px;
    font-weight: bold;
    text-align: center;
    color: #E73C5C!important;}.ar1web_today_img{background: #fafafa; text-align: center; border-bottom: 1px dashed #DCDADA; padding-bottom: 10px;}
.hithere{text-align: center; font-size: 13px; line-height: 24px; background-color: #FAFAFA; padding: 10px; color: #524F50;}
</style>
<div class="ar1web_today_img"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik7DVlcmsDwNqWlHCzY6SVArWgGe_5mEVvSs0w8G7yb5XYmWEVy-TwhXQc3NthETdNYxC8trprWsqbI4DWj-2qmJMuLANhC203x6KL8lskbV_uI0wXk6h0Mc7kgc9lQ0O6CU4QayxtB0s/s1600/ar1web.png" />
<a href="#" target="_blank">أروع الخلفيات المخصصة للمواقع!</a>
</div>
<div class="hithere">أزيد من 100 خلفية مخصصة للمواقع تضم أجمل وأرقى الأشكال مع طريقة التركيب والاختيار حسب الذوق لا داعي لأن تبحث بعد الآن ☺️</div>
    تخصيص الإضافة :
    المحدد بالأحمر # يغير بالرابط
    المحدد بالوردي يغير بالكلمات
    المحدد بالأخضر يخص رابط الصورة


    <style>
.doar1web.join:hover,.doar1web.gplus:hover,.doar1web.facebook:hover,.doar1web.instagram:hover,.doar1web.twitter:hover { background: #696868; }
.doar1web{float:none;margin-top:15px;margin-right:5px;width:32px;height:32px;line-height:32px}
.doar1web a{padding:0;margin:0;width:32px;height:32px;line-height:32px;text-align:center}
.doar1web a i{text-align:center;color:#fff;}
.doar1web a:hover i{color:#fff;}
.doar1web.join{background:#CC181E;}
.doar1web.instagram{background:#406f94;}
.doar1web.gplus{background:#f20000;}
.doar1web.twitter{background:#00baff;}
.doar1web.facebook{background:#516ca4;}
.doar1web a i,.doar1web a:hover i{color:#fff;}
.user-profile {
    background-color: #fff;
    text-align: center;
}
.user-profile>img {
    width: 100%;
}
.user-profile .user-img {
    text-align: center;
    display: block;
    margin: 0 auto;
    margin-top: -70px;
    height: 130px;
    width: 130px;
    position: relative;
}
.user-profile .user-img img {
    width: 100%;
    border: 3px solid #fff;
}

.user-profile .user-img .user-img-hover {
    background: none repeat scroll 0px 0px rgba(51, 51, 51, 0.8);
    color: #F4F4F4;
    font-size: 25px;
    text-align: center;
    line-height: 3.5;
    height: 124px;
    width: 124px;
    z-index: 999;
    display: inline-block;
    padding-top: 20px;
    position: relative;
    bottom: 127px;
    transition: all 800ms ease 0s;
    opacity: 0;
    visibility: hidden;
    transform: scale(0);
}
.user-profile .user-img:hover .user-img-hover {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
}

.user-profile .details {
    display: inline-block;
}
.user-profile .details ul {
    padding: 0;
    margin-bottom: 20px;
    margin-top: 10px;
}
.user-profile .details ul li {
    display: inline-block;
    color: #797979;
    font-size: 16px;
    font-weight: 600;
}
.user-profile .details ul li:last-child {
    margin-left: 0;
}
.user-profile .details ul li span {
    display: block;
    font-size: 28px;
}
</style>
<div class="user-profile">
                    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwhFdjIiMnJEjIRFZtzioYyX7pnsSOeCMjJl25XNWECv-pFwggcGrAXV02y6E1U6TtWWlS79wlA96ab3EbgnJnFmBAAYcgZZga-C_d8OUNrTEEZRw3t7qJk5OdE2AMWtggm9BiIX6lABw/s1600/yamiar1web.png" class="img-responsive" />
                    <div class="user-img">
                       <a href="#" target="_blank">
                        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguuIhLPyWZisJJr8AtyeEA1STumNThAGzzGaGJNXH134mCZbUXJD9xwnrZ4yh7eBAhC6cjAGEx_W52zbaE4MvWiOdrOiFlfU6lVFoUHkRNnglw3Je9K_p04hzyh0gmM-qodCX8u281Hbk/s1600/adminar1web.jpg" />
                        <div class="user-img-hover">
                            <i class="fa fa-link"></i>
                        </div></a>
                    </div>
                    <div class="details">
                      <ul>
<li class='doar1web join'><a href='#' rel='nofollow' target='_blank' title='اشترك بالقناة'><i class='fa fa-youtube'></i><span class='inv'></span></a></li>
<li class='doar1web gplus'><a href='#' rel='nofollow' target='_blank' title='تابعنا على جوجل+'><i class='fa fa-google-plus'></i><span class='inv'></span></a></li>
<li class='doar1web facebook'><a href='#' rel='nofollow' target='_blank' title='تابعنا على فيسبوك'><i class='fa fa-facebook'></i><span class='inv'></span></a></li>
<li class='doar1web instagram'><a href='#' rel='nofollow' target='_blank' title='تابعنا على أنستجرام'><i class='fa fa-instagram'></i><span class='inv'></span></a></li>
<li class='doar1web twitter'><a href='#' rel='nofollow' target='_blank' title='تابعنا على تويتر'><i class='fa fa-twitter'></i><span class='inv'></span></a></li>
</ul>
                </div></div>
    تخصيص الإضافة :
    المحدد بالأحمر # يغير بالرابط
    المحدد بالبرتقالي يخص الأيقونات "الموقع"
    المحدد بالوردي يغير بالكلمات
    المحدد بالأخضر يخص رابط صورة الكاتب
    المحدد بالأزرق يخص الخلفية


    <style>
.bikher { overflow: hidden; }
.big-section     { color:#FFF; }
.rowme             { background-color: #425F9C; text-align:center; font-family: droid arabic kufi;}

.flip-bikher { -webkit-perspective: 1000; -webkit-transform-style: preserve-3d; }

.flip-bikher, .front, .back { margin:0 auto; width: 285px; height: 160px; }

.flipper { -webkit-transition: 0.6s; -webkit-transform-style: preserve-3d; position: relative; }

.front, .back { -webkit-backface-visibility: hidden; -webkit-transition: 0.6s; -webkit-transform-style: preserve-3d; padding-top:20px; padding-bottom:10px; position: absolute; top: 0; left: 0; }

.front  { background:#35528f; z-index: 2; -webkit-transform: rotateY(0deg); }
    .front span     { font-size:80px; margin-top:10px; }
.back   { background:#021f5c;; -webkit-transform: rotateY(-180deg); } 

    .flip-bikher:hover .back  { -webkit-transform: rotateY(0deg); }
    .flip-bikher:hover .front { -webkit-transform: rotateY(180deg); }
</style>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ar_AR/all.js#xfbml=1&appId=1389892087910588";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div id="facebook" class="big-section">
  <div class="bikher">
    <div class="rowme">

      <div class="flip-bikher">
        <div class="flipper">
          <div class="front">
            <div>صفحتنا على الفيسبوك</div><br/>
            <span class="fa fa-facebook-square"></span>
          </div>
          <div class="back">
          <br/> تابعنا أول بأول<br/><br/>
            <div class="fb-like" data-href="#" data-layout="box_count" data-action="like" data-show-faces="false" data-share="false"></div>
           
          </div>
        </div>
      </div>

    </div>
  </div></div>
    تخصيص الإضافة :
    المحدد بالأحمر # يغير برابط الصفحة
    المحدد بالوردي يغير بالكلمات


    <script type='text/javascript'>
      jQuery(document).ready(function(){
        jQuery(&#39;.skillbar&#39;).each(function(){
               jQuery(this).find(&#39;.skillbar-bar&#39;).animate({
                                 width:jQuery(this).attr(&#39;data-percent&#39;)
                                                         },6000);
      });
      });
    </script>
<style>
#skills-ar1web{height: 210px;}
.skillbar {
position:relative;
display:block;
margin-bottom:5px;
width:100%;
background:#eee;
height:30px;
-webkit-transition:0.4s linear;
-moz-transition:0.4s linear;
-ms-transition:0.4s linear;
-o-transition:0.4s linear;
transition:0.4s linear;
-webkit-transition-property:width, background-color;
-moz-transition-property:width, background-color;
-ms-transition-property:width, background-color;
-o-transition-property:width, background-color;
transition-property:width, background-color;
}
.skillbar-title {
position:absolute;
top:0;
right:0;
font-weight:normal;
font-size:13px;
color:#fff;
background:#6adcfa;
}
.skillbar-title span {
display:block;
padding:0 20px;
height:30px;
line-height:30px;
}
.skillbar-bar {
height:30px;
width:0px;
background:#6adcfa;
}
.skill-bar-percent {
position:absolute;
left:10px;
top:0;
font-size:11px;
height:30px;
line-height:30px;
color:#fff;
color:rgba(0, 0, 0, 0.4);
}
</style>
 <div id='skills-ar1web'>
          <div class='skillbar clearfix ' data-percent='100%'>
            <div class='skillbar-title' style='background: #33B5E5;'>
              <span>
                Photoshop
              </span>
            </div>
            <div class='skillbar-bar' style='background: #33B5E5;'/>
            <div class='skill-bar-percent'>
              100%
            </div>
          </div>
          <div class='skillbar clearfix ' data-percent='90%'>
            <div class='skillbar-title' style='background: #f7a53b;'>
              <span>
                Blogger
              </span>
            </div>
            <div class='skillbar-bar' style='background: #f7a53b;'/>
            <div class='skill-bar-percent'>
              90%
            </div>
          </div>
          <div class='skillbar clearfix ' data-percent='68%'>
            <div class='skillbar-title' style='background: #88cd2a;'>
              <span>
                HTML5/CSS3
              </span>
            </div>
            <div class='skillbar-bar' style='background: #88cd2a;'/>
            <div class='skill-bar-percent'>
              68%
            </div>
          </div>
          <div class='skillbar clearfix ' data-percent='75%'>
            <div class='skillbar-title' style='background: #3D8ACE;'>
              <span>
                WordPress
              </span>
            </div>
            <div class='skillbar-bar' style='background: #3D8ACE;'/>
            <div class='skill-bar-percent'>
              75%
            </div>
          </div>
          <div class='skillbar clearfix ' data-percent='65%'>
            <div class='skillbar-title' style='background: #64B083;'>
              <span>
                JavaScript/Jquery
              </span>
            </div>
            <div class='skillbar-bar' style='background: #64B083;'/>
            <div class='skill-bar-percent'>
              65%
            </div>
          </div>
          <div class='skillbar clearfix ' data-percent='35%'>
            <div class='skillbar-title' style='background: #fa6e6e;'>
              <span>
                illustrator
              </span>
            </div>
            <div class='skillbar-bar' style='background: #fa6e6e;'/>
            <div class='skill-bar-percent'>
              35%
            </div>
          </div>
          <div class='skillbar clearfix ' data-percent='45%'>
            <div class='skillbar-title' style='background: #9F5DC1;'>
              <span>
                After Effects
              </span>
            </div>
            <div class='skillbar-bar' style='background: #9F5DC1;'/>
            <div class='skill-bar-percent'>
              45%
            </div>
          </div>
        </div>
    تخصيص الإضافة :
    المحدد بالوردي يغير بالكلمات
    المحدد بالأخضر يخص  لون لكل من Photoshop, Blogger ...
    * إذ لم تتحرك الخاصية الخاصة بالنسبة المئوية فأنسخ الكود المحدد بالأحمر  بدون أن تتركه مكرر ثم ضعه فوق </head>
    ليست هناك تعليقات:

    قائمتين مميزتان لتسهيل المهام


    أطرح لكم قائمتين رائعتين مميزتان تصلح لكافة الأعمال وتتناسق مع أي قالب، وسهولة عملها يمكنك استخدامها للوصول إلى صفحة معينة أو موقع إلخ... ببساطة تامة أتكلم هنا عن القائمة المستديرة لأنها تبقى ثابتةً في مكانها... تشمل الإضافاتين تأثيرات رائعة وتركيبها سهل لذا بدون أي كلمات آخرى أترككم لمعاينتها وتجربتها
    شرح  طريقة التركيب
    1 . من التخطيط أضف أداة Html/Javascript وضع بها كود القائمة المختارة 



    <div class="ar1webmb">
    <input type="checkbox" id="tm" />
    <!-- The menu -->
    <ul class="sidenav">
      <li><a href="#"><i class="fa fa-check"></i><b>المهام</b></a></li>
      <li><a href="#"><i class="fa fa-inbox"></i><b>الرسائل</b></a></li>
      <li><a href="#"><i class="fa fa-pencil"></i><b>المواضيع الجديدة</b></a></li>
      <li><a href="#"><i class="fa fa-cog"></i><b>الإعدادات</b></a></li>
      <li><a href="#"><i class="fa fa-star"></i><b>جديد المدونة</b></a></li>
      <li><a href="#"><i class="fa fa-power-off"></i><b>تسجيل الخروج</b></a></li>
    </ul>
    <section>
      <!-- Label for #tm checkbox -->
      <label for="tm">القائمة<br/> ~ إضغط عليّ ~ </label>
    </section>
  </div>
<style>
@import url(http://fonts.googleapis.com/css?family=Montserrat|Open+Sans:400,300);
 #addku1,#addku2 {display:none;}
.ar1webmb {
  float: none;
  position: relative;
  overflow: hidden;
}
#tm {
  display: none;
}
.ar1webmb section {
  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUuvihaPOlBXLIMtNkWc0DM88DtA6hUUbsIzzO2icz_xN5iyd8A53bIvm4oNHpEie4A8-UaJLmsylE1cMXr3eVxhNQFZQ_Cl_Aaj7uHrepWcK8hvY3ePgU72EXSW6qcbW02PmecCLz0eg/s1600/ar1web44.jpg");
  width: 300px;
  height: 500px;
  position: relative;
  transition: all 0.25s;background-size: cover;    box-shadow: 0 0 10px 0px #000000;
}
.ar1webmb section label {
  color: white;
    font: bold 22px 'Adobe Arabic','serif';
    text-align: center;
    border: 2px solid white;
    display: block;
    padding: 6px 0;
    width: 60%;
    position: absolute;
    left: 20%;
    top: 100px;
    cursor: pointer;
    text-transform: uppercase;
    background-color: rgba(49, 46, 47, 0.36);
}
.sidenav {
  background: rgb(169, 106, 70);
  width: 160px;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  padding-top: 100px;
}
.sidenav li {
  list-style-type: none;padding-right: 19px;
}
.sidenav a {
  color: white;
  text-decoration: none;
}
.sidenav b {
  font: bold 19px/48px 'Adobe Arabic','serif';
  display: block;
  opacity: 0;
  transform: translateX(50px);
  transition: all 0.4s;
}
.sidenav i {
  display: block;
  width: 50px;
  float: left;
  font-size: 16px;
  line-height: 48px;
  text-align: center;
}
#tm:checked ~ section {
  transform: translateX(160px);
}
#tm:checked ~ .sidenav b {
  opacity: 1;
  transform: translateX(0);
}
#tm:checked ~ .sidenav li:nth-child(1) b {
  transition-delay: 0.08s;
}
#tm:checked ~ .sidenav li:nth-child(2) b {
  transition-delay: 0.16s;
}
#tm:checked ~ .sidenav li:nth-child(3) b {
  transition-delay: 0.24s;
}
#tm:checked ~ .sidenav li:nth-child(4) b {
  transition-delay: 0.32s;
}
#tm:checked ~ .sidenav li:nth-child(5) b {
  transition-delay: 0.40s;
}
#tm:checked ~ .sidenav li:nth-child(6) b {
  transition-delay: 0.48s;
}
</style>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>
    تخصيص القائمة :
    المحدد بالأحمر # يغير بالرابط
    المحدد بالبرتقالي يخص الأيقونات "الموقع"
    المحدد بالوردي يغير بالكلمات
    المحدد بالأخضر يخص رابط الصورة
    المحدد بالأزرق يخص لون الخلفية



    <style>
.c-circle-nav__toggle,.c-circle-nav__toggle span{transition:background .3s;-webkit-transition:background .3s}.c-circle-nav{position:fixed;bottom:12px;right:12px;z-index:1000;width:48px;height:48px;border-radius:24px}@media (min-width:480px)and (min-height:480px){.c-circle-nav{width:96px;height:96px;border-radius:48px}}.c-circle-nav__items{display:block;list-style:none;z-index:90;margin:0;padding:0}.c-circle-nav__item{display:block;position:absolute;top:0;left:0;width:48px;height:48px;border-radius:24px;opacity:0;-webkit-transition-property:-webkit-transform,opacity;transition-property:transform,opacity;-webkit-transition-duration:.3s,.3s;transition-duration:.3s,.3s;-webkit-transition-timing-function:cubic-bezier(.35,-.59,.47,.97);transition-timing-function:cubic-bezier(.35,-.59,.47,.97)}.c-circle-nav__item:nth-child(1){-webkit-transition-delay:.4s;transition-delay:.4s}.c-circle-nav__item:nth-child(2){-webkit-transition-delay:.3s;transition-delay:.3s}.c-circle-nav__item:nth-child(3){-webkit-transition-delay:.2s;transition-delay:.2s}.c-circle-nav__item:nth-child(4){-webkit-transition-delay:.1s;transition-delay:.1s}.c-circle-nav__item:nth-child(5){-webkit-transition-delay:0s;transition-delay:0s}.c-circle-nav.is-active .c-circle-nav__item{-webkit-transition-timing-function:cubic-bezier(.35,.03,.47,1.59);transition-timing-function:cubic-bezier(.35,.03,.47,1.59);opacity:1}.c-circle-nav.is-active .c-circle-nav__item:nth-child(1){-webkit-transition-delay:0s;transition-delay:0s;-webkit-transform:translate(-144px,0);-ms-transform:translate(-144px,0);transform:translate(-144px,0)}@media (min-width:480px)and (min-height:480px){.c-circle-nav__item{width:96px;height:96px;border-radius:48px!important}.c-circle-nav.is-active .c-circle-nav__item:nth-child(1){-webkit-transform:translate(-288px,0);-ms-transform:translate(-288px,0);transform:translate(-288px,0)}}.c-circle-nav.is-active .c-circle-nav__item:nth-child(2){-webkit-transition-delay:.1s;transition-delay:.1s;-webkit-transform:translate(-134px,-56px);-ms-transform:translate(-134px,-56px);transform:translate(-134px,-56px)}@media (min-width:480px)and (min-height:480px){.c-circle-nav.is-active .c-circle-nav__item:nth-child(2){-webkit-transform:translate(-267px,-111px);-ms-transform:translate(-267px,-111px);transform:translate(-267px,-111px)}}.c-circle-nav.is-active .c-circle-nav__item:nth-child(3){-webkit-transition-delay:.2s;transition-delay:.2s;-webkit-transform:translate(-102px,-102px);-ms-transform:translate(-102px,-102px);transform:translate(-102px,-102px)}@media (min-width:480px)and (min-height:480px){.c-circle-nav.is-active .c-circle-nav__item:nth-child(3){-webkit-transform:translate(-204px,-204px);-ms-transform:translate(-204px,-204px);transform:translate(-204px,-204px)}}.c-circle-nav.is-active .c-circle-nav__item:nth-child(4){-webkit-transition-delay:.3s;transition-delay:.3s;-webkit-transform:translate(-56px,-134px);-ms-transform:translate(-56px,-134px);transform:translate(-56px,-134px)}@media (min-width:480px)and (min-height:480px){.c-circle-nav.is-active .c-circle-nav__item:nth-child(4){-webkit-transform:translate(-111px,-267px);-ms-transform:translate(-111px,-267px);transform:translate(-111px,-267px)}}.c-circle-nav.is-active .c-circle-nav__item:nth-child(5){-webkit-transition-delay:.4s;transition-delay:.4s;-webkit-transform:translate(0,-144px);-ms-transform:translate(0,-144px);transform:translate(0,-144px)}.c-circle-nav__link{display:block;width:100%;height:100%;border-radius:24px!important;box-shadow:inset 0 0 0 2px #fff}@media (min-width:480px)and (min-height:480px){.c-circle-nav.is-active .c-circle-nav__item:nth-child(5){-webkit-transform:translate(0,-288px);-ms-transform:translate(0,-288px);transform:translate(0,-288px)}.c-circle-nav__link{border-radius:48px!important}}.c-circle-nav__link img{display:block;max-width:100%;height:auto}.c-circle-nav__link:hover{box-shadow:inset 0 0 0 2px #ff283c}.c-circle-nav__toggle{display:block;position:absolute;z-index:100;margin:0;padding:0;width:48px;height:48px;background-color:#ff283c;font:inherit;font-size:0;text-indent:-9999px;border-radius:24px!important;cursor:pointer;border:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:none}@media (min-width:480px)and (min-height:480px){.c-circle-nav__toggle{width:96px;height:96px;border-radius:48px!important}}.c-circle-nav__toggle.is-active,.c-circle-nav__toggle:focus,.c-circle-nav__toggle:hover{outline:0;background-color:#c10012}.c-circle-nav__toggle span,.c-circle-nav__toggle span::after,.c-circle-nav__toggle span::before{display:block;position:absolute;height:4px;background:#fff;border-radius:1px!important}.c-circle-nav__toggle span{top:22px;left:10px;right:10px}@media (min-width:480px)and (min-height:480px){.c-circle-nav__toggle span,.c-circle-nav__toggle span::after,.c-circle-nav__toggle span::before{height:8px;border-radius:2px!important}.c-circle-nav__toggle span{top:44px;left:20px;right:20px}}.c-circle-nav__toggle span::after,.c-circle-nav__toggle span::before{left:0;width:100%;content:"";-webkit-transition-duration:.3s,.3s;transition-duration:.3s,.3s;-webkit-transition-delay:.3s,0s;transition-delay:.3s,0s}.c-circle-nav__toggle span::before{top:-8px;-webkit-transition-property:top,-webkit-transform;transition-property:top,transform}.c-circle-nav__toggle span::after{bottom:-8px;-webkit-transition-property:bottom,-webkit-transform;transition-property:bottom,transform}@media (min-width:480px)and (min-height:480px){.c-circle-nav__toggle span::before{top:-16px}.c-circle-nav__toggle span::after{bottom:-16px}}.c-circle-nav__toggle.is-active span{background:0 0}.c-circle-nav__toggle.is-active span::before{top:0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);-webkit-transition-delay:0s,.3s;transition-delay:0s,.3s}.c-circle-nav__toggle.is-active span::after{bottom:0;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-transition-delay:0s,.3s;transition-delay:0s,.3s}.c-mask{position:fixed;top:0;left:0;z-index:900;visibility:hidden;opacity:0;width:100%;height:100%;background-color:rgba(0,0,0,.8);-webkit-transition:opacity .3s,visibility .3s;transition:opacity .3s,visibility .3s}.c-mask.is-active{opacity:1;visibility:visible}

</style>
<nav id="c-circle-nav" class="c-circle-nav">
  <button id="c-circle-nav__toggle" class="c-circle-nav__toggle">
    <span>Toggle</span>
  </button>
  <ul class="c-circle-nav__items">
    <li class="c-circle-nav__item">
      <a href="#" class="c-circle-nav__link">
        <img src="http://callmenick.com/_development/css-circle-menu/img/house.svg" alt="" />
      </a>
    </li>
    <li class="c-circle-nav__item">
      <a href="#" class="c-circle-nav__link">
        <img src="http://callmenick.com/_development/css-circle-menu/img/photo.svg" alt="" />
      </a>
    </li>
    <li class="c-circle-nav__item">
      <a href="#" class="c-circle-nav__link">
        <img src="http://callmenick.com/_development/css-circle-menu/img/pin.svg" alt="" />
      </a>
    </li>
    <li class="c-circle-nav__item">
      <a href="#" class="c-circle-nav__link">
        <img src="http://callmenick.com/_development/css-circle-menu/img/search.svg" alt="" />
      </a>
    </li>
    <li class="c-circle-nav__item">
      <a href="#" class="c-circle-nav__link">
        <img src="http://callmenick.com/_development/css-circle-menu/img/tools.svg" alt="" />
      </a>
    </li>
  </ul>
</nav>
<script src="http://callmenick.com/_development/css-circle-menu/js/circleMenu.min.js"></script>
    تخصيص القائمة :
    المحدد بالأحمر # يغير بالرابط
    المحدد بالأخضر يخص رابط صور الأيقونات
    ليست هناك تعليقات:
    الاشتراك في: الرسائل (Atom)

    خبراتي في التصميم

    مقولة الأسبوع

    تابعنا أول بأول