تجارت الکترونیکطراحی وب

اثر تزئینی شناور با CSS3 & html5

طراحی وب

در آموزش امروز ما قصد داریم به برخی از اثرات ساده اما فانتزی شناور روی عکسها با استفاده از CSS و html5  بپردازیم. تکنیک های که شامل CSS3 گذار به همراه: شناور شبه طبقه، و دیگر خواص CSS برای یک طراحی شیک.

لطفا توجه داشته باشید که نتایج حاصل از این آموزش تنها در مرورگر هایی که از CSS3 پشتیبانی می کنند نمایش داده می شود مانند کروم، فایرفاکس و سافاری.

طراحی وب

The Basic Markup

نشانه گذاری اساسی

لطفا توجه داشته باشید که کدهای زیر در DEMO1  خواهد بود.

<div class="imgholder">

   <div class="outer1 circle"></div>

   <div class="outer2 circle"></div>

   <figure>

      <img src="images/img1.jpg" />

      <figcaption class="caption">Image1</figcaption>

   </figure>

</div>

<div class="imgholder">

   <div class="outer1 circle"></div>

   <div class="outer2 circle"></div>

   <figure>

      <img src="images/img2.jpg" />

      <figcaption class="caption">Image2</figcaption>

   </figure>

</div>

/*other thumbnails*/

The Basic CSS

اولین چیزی که در مورد CSS است این که تعریف برخی از خواص CSS پایه ای است و بعد از عکسها ما می توانیم یک عکس کوچک از طریق CSS3 مرز و شعاع دایره برای آن ایجاد کنیم.

.imgholder

{

   position: relative;

   width: 120px;

   height: 120px;

   border-radius: 100px;

   -moz-border-radius: 10px;

   -webkit-border-radius: 10px;

}

/* thumbnails css */

.imgholder img

{

   position: absolute;

   left: 0;

   top: 0;

   width: 120px;

   height: 120px;

   border-radius: 100px;

   -moz-border-radius: 10px;

   -webkit-border-radius: 10px;

   z-index: 5;

}

.imgholder figcaption

{

   position: absolute;

   left: 0;

   top: 120%;

   width: 120px;

   color: #004E87;

   text-shadow: -1px -1px 0 #fff;

   z-index: 4;

}

/* decoration css */

.imgholder .circle

{

   position: absolute;

   width:120px;

   height:120px;

   border-radius: 100px;

   -moz-border-radius: 10px;

   -webkit-border-radius: 10px;

}

The Fancy Hover Effects

اکنون ، ما برای اضافه کردن اثر فانتزی در این عکسها در زمانی که آنها hovered می شوند .

.imgholder img

{

   opacity: 0.5;

   transition:

      opacity 0.7s ease-out 0.3s;

   -moz-transition:

      opacity 0.7s ease-out 0.3s;

   -webkit-transition:

      opacity 0.7s ease-out 0.3s;

}

.imgholder:hover img

{

   opacity: 1;

}

بعد، اجازه دهید اولین سبک دکوراسیون عنصر DIV ما است، ما از این عنصر برای ایجاد پس زمینه و مرز برای ریز استفاده می کنیم.

.imgholder .outer1

{

   top: -8px;

   left: -8px;

   z-index: 2;

   border: 8px solid;

   border-color: #DEEBFC;

   box-shadow: 0 0 3px #AFD3FF;

   -moz-box-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 );

   transition:

      box-shadow 1s ease-out,

      border-color 1s;

   -moz-transition:

      -moz-box-shadow 1s ease-out,

      border-color 1s;

   -webkit-transition:

      -webkit-box-shadow 1s ease-out,

      border-color 1s;

}

.imgholder:hover .outer1

{

   border-color: #0088EA;

   box-shadow: 0 0 10px #0285E2;

   -moz-box-shadow: 0 0 10px #0285E2;

   -webkit-box-shadow: 0 0 10px #0285E2;

}

عنصر DIV دکوراسیون بعدی را به مرز های بیرونی برای تصاویر کوچک استفاده خواهد می کنیم.

.imgholder .outer2

{

   top: -18px;

   left: -18px;

   width: 136px;

   height: 136px;

   z-index: 1;

   border: 10px solid;

   border-color: #9BC8FF;

   box-shadow: 0 0 3px #8EB9FF;

   -moz-box-shadow: 0 0 3px #8EB9FF;

   -webkit-box-shadow: 0 0 3px #8EB9FF;

   opacity: 0;

   transition:

      opacity 0.7s ease-out 0.3s,

      box-shadow 0.7s ease-out 0.3s;

   -moz-transition:

      opacity 0.7s ease-out 0.3s,

      -moz-box-shadow 0.7s ease-out 0.3s;

   -webkit-transition:

      opacity 0.7s ease-out 0.3s,

      -webkit-box-shadow 0.7s ease-out 0.3s;

}

.imgholder:hover .outer2

{

   opacity: 1;

   box-shadow: 0 0 20px #8EB9FF;

   -moz-box-shadow: 0 0 20px #8EB9FF;

   -webkit-box-shadow: 0 0 20px #8EB9FF;

}

Enjoy!

اکنون شما می توانید DEMO1 و  DEMO2 و DEMO3 را ببینید و لذت ببرید

Download              View Demo

گفتگو ها

    بسیار عالی

    حسین جان این بهتره بگی html5 و css3 هست چون تگ های استفاده شده در html واسه html5 هست بیشتر …

      حسین جاهدی

      آره درست داداش تصحیح می کنم ممنون که گفتی 🙂

    البته بیشتر که نه ولی figure واسه html5 هست …

    ایول،عالیه ! رفتید تو خط طراحی وب !!

    تبادل لینک میکنید ؟

      حسین جاهدی

      پیچ رنک سایت شما ۳ به بالا باشه بله 🙂
      و اگر دوست داشته باشید لینک سایت شما در آی تی پورت قرار بگیرد به قسمت تبلیغات سایت مراجعه کنید.

        چرا ۳ ؟ امروز پیچ رنک گوگل آپدیت شد و شما ۲ شدید … الان با ۲ تبادل میکنید ؟؟؟ 😀

          حسین جاهدی

          پیچ رنک آی تی پورت ۲٫۵ شده و ما سعی می کنیم با افراد که پیچ رنک بالاتری دارن از ما تبادل لینک رایگان کنیم ولی افراد مثل خودمون و به پایین برای قرار دادن لینک شون در سایت مبلغ ۳ تا ۴ تومن میگیریم 🙂

          خداییش من اگه کارشمارو از زمانی که اومدن اینترنت میکردم الان میلیونر می شدم !

          حسین جاهدی

          خوب دیگه برای قرار دادن لینک باید پول پرداخت کنید حالا شما ۳ تومن پرداخت کنید اگر دوست داشتید
          اما یک راه دیگه هم هست ما داریم از افرادی که هر کدوم از دسته های آموزشی سایت رو می تونند به صورت خوب آموزش بدن به عنوان نویسنده ازشون دعوت به همکاری می کنیم که البته باید یک سری از نکات رو رعایت کنند در آموزش و بعد از برسی اگر مفید بودن برای سایت به عنوان نویسنده سایت می پذیریمشون در این حالت سایت شما رایگان لینک میشه
          حالا حق انتخاب با خودتونه

    خب من الان با این منطق شما راضی نمی شم که میگید باید پول بدی ! وقتی پیچ رنک برابر باشه ! و تازه آلکسای سایت ما پایین از سایت شماست !!!
    نویسندگی که خیلی خوبه ! البته فعلا باید کنکور بدم .. جمعه(هفته آینده) کنکور هنرستانی ! بعدش شاید اومدم/

      حسین جاهدی

      ببن دوست من هر مدیر سایتی سیاست های شخصی خودشو داره شاید الان بگی چه سیاست داغونی ولی دوست دارم تجربه جدیدی داشته باشم و برسی کنم ببینم چه نتیجه ای خواهد داشت در مورد الکسای هم حرف یکی از دوستانم رو بهت بگم:
      طبق سوالاتی که از اپراتور‌های الکسا داشتم ، گفتند که تنها معیار رتبه بندی الکسا فقط بازدید از طریق تولبار است . اما باز هم این سوال پیش می‌آید که چند درصد کاربران اینترنت تولبار الکسا را نصب دارند؟ آیا زمانی که در محل کار خود در حال فعالیت در اینترنت هستید ، تولبار الکسا را نصب دارید؟ بر روی سیستم‌های یک کافی نت چطور؟ آیا تولبار الکسا نصب است ؟
      حالا بازم برای شما بازم رتبه الکسا خیلی مهم ؟
      خوشحال میشم یک نویسنده خوب دیگه بهمون اضافه بشه

        در مورد سیاست مدیریت سایت که آره حق دارید، کلا چیز جالبیه 😀 . اما یک قانون کلی هست دیگه تو اینترنت، قانون نانوشته / حالا ولش
        اما در مورد الکسا :
        نه اینطور نیست آلکسا میاد بر اساس بازدید، ورودیه گوگل و شهر بازدید رتبه بندی میکنه برای اطلاع بیشتر میتونید به خود الکسا و مقالاتش مراجعه کنید یا توضیحات آلکسای یک سایت میبینید که کلمات کلیدی رو براتون دسته بندی کرده و بیشترین و… رو براتون نمایش داده !
        خب کلا ولش 😀 ، ولی بحث خیلی مفیدی بود ! من کـه لِذت بردم!

    بحثی که تو نظرات شده بود خیلی باهال بود.هی میام یچی بگم میبینم نمیشه.

      حسین جاهدی

      🙂

        حسین جان شما چرا از آیکون g buzz استفاده کردید واسه لینک به g + ؟
        این آیکونو اگه خواستی استفاده کنه.خ قشنگ و سادست!
        https://ssl.gstatic.com/images/icons/gplus-64.png

          حسین جاهدی

          اگر مشکلی پیش نیاد شاید تا چند هفته دیگه قالب جدید سایت بالا بیاد 🙂

        تو بخش آی تی پورت در شبکه های اجتماعی منظورم بود!

          حسین جاهدی

          متاسفانه این قالب آیکن های شبکه های اجتماعی رو نداشته و یک ماه بیشتر میشه که مشکلی برام به وجود آمده و نمی تونم افزونه ای رو نصب یا آپدیت کنم
          ممنون که توجه کردی و گفتی 🙂

    سلام داداش
    لینک دانلود کار نمیکنه !
    ممنون میشم اوکیش کنید

    jennifer

    زیباست

    حتما استفاده می کنم در طرح های بعدیم