no-img
دیزاینر

مجموعه آیکون های CSS3


دیزاینر
مطالب ویژه
اطلاعیه های سایت

adsads
گزارش خرابی لینک
اطلاعات را وارد کنید .

ادامه مطلب

مجموعه آیکون های CSS3
zip
اردیبهشت ۲۵, ۱۳۹۷

مجموعه آیکون های CSS3


در قالب های جدید با توجه به افزایش امکانات ، حجم و سرعت مقوله ای مهم است که در سئو هم تاثیر بسزایی دارد. معمولا عکس ها حجم زیادی از یک صفحه را میگرند و باعث کندی سرعت لود سایت میشوند که در تکنیک های جدید برای افزایش سرعت و بارگذاری از تصاویر SVG استفاده میکنند که بعدا آموزش ساخت و استفاده از تصاویر SVG را در سایت منتشر خواهم کرد.

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

 


css3-icons1

برای قرار دادن لوگو بالا ابتدا کد CSS  زیر را قرار دهید:

<style type="text/css"> span{height:40px; width:40px; display:block; position:relative;}
.demoSpan1{background:#333; border-radius:20px;-webkit-border-radius:20px;-moz-border-radius:20px;}
.demoSpan1:before, .demoSpan1:after{content:''; display:block; position:absolute;}
.demoSpan1:before{height:12px; width:20px; top:12px; left:11px; background:#fff;}
.demoSpan1:after{height:10px; width:18px; top:16px; left:7px; border-left:2px #fff solid; border-bottom:2px #fff solid; }
</style>

سپس کد html  زیر را در مکانی که میخواهید آیکون قرار بگیرد وارد کنید:

<span class="demoSpan1">
</span>


css3-icons2

کد CSS :

<style type="text/css"> span{height:40px; width:40px; display:block; position:relative;}
.demoSpan1{background:#333; border-radius:50px;-webkit-border-radius:50px;-moz-border-radius:50px;}
.demoSpan1:before{content:''; height:0; width:0; display:block; border:10px transparent solid; border-bottom-width:0; border-top-color:#fff; position:absolute; bottom:12px; left:10px; }
.demoSpan1:after{content:''; height:16px; width:6px; display:block; background:#fff; position:absolute; top:8px; left:17px;}
.demoSpan2{ width:20px; height:2px; display:block; position:absolute; bottom:7px; left:10px; background:#fff;}
</style>

کد html :

<span class="demoSpan1">
<span class="demoSpan2">
</span>
</span>


css3-icons3

کد CSS :

<style type="text/css"> span{height:40px; width:40px; display:block; position:relative;}
.demoSpan1{width:38px; height:38px; border-left:2px #333 solid; border-bottom:2px #333 solid; overflow:hidden;}
.demoSpan1:before{content:''; height:20px; width:6px; display:block; background:#333; position:absolute; top:33px; left:26px; box-shadow:-10px -28px 0 #333, -20px -4px 0 #333;-webkit-box-shadow:-10px -28px 0 #333, -20px -4px 0 #333;-moz-box-shadow:-10px -28px 0 #333, -20px -4px 0 #333;}
.demoSpan1:after{content:''; height:12px; width:6px; display:block; background:#333; position:absolute; top:19px; left:26px; box-shadow:-10px 8px 0 #333, -20px -4px 0 #333;-webkit-box-shadow:-10px 8px 0 #333, -20px -4px 0 #333;-moz-box-shadow:-10px 8px 0 #333, -20px -4px 0 #333;}
</style>

کد html :

<span class="demoSpan1">
</span>

 

برای دریافت۲۰۰ آیکون css3 میتوانید به سایت www.uiplayground.in/css3-icons مراجعه کنید.



ads

درباره نویسنده

Admin 153 نوشته در دیزاینر دارد . مشاهده تمام نوشته های

دیدگاه ها


دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *