در این نمونه یک منو باز شونده در اختیار شما قرار گرفته است که با کلیک بر روی آن باز و با کلیک مجدد بسته خواهد شد. کدهای HTML : 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <div class=“content”> <nav id=“menu” class=“menu”> <div class=“morph-shape” […]
در این مطلب هفتمین نمونه از هاور رو در اختیارتون میزارم. کدهای HTML : 1 2 3 4 5 6 7 8 9 10 <div class=“grid”> <figure class=“effect-marley”> <img src=“http://s.7Learn.com/uploads/2014/12/sample.jpg” alt=“sample”/> <figcaption> <h2>Sweet <span>Marley</span></h2> <p>Marley tried to convince her but she was not interested.</p> <a href=“#”>View more</a> </figcaption> </figure> </div> چونکه از تگهای HTML5 استفاده شده […]
در این مطلب میخوام یک ابزار بنام CSShake رو خدمت شما معرفی کنم و اونو آموزش بدم. با استفاده از این ابزار میتونین عناصر درون صفحه خودتون رو به صورتهای مختلفی به لرزه در بیارین و یک حالت ارتعاشی به اونا نسبت بدین. همونطور که میبینید ، بعضی از مربعها ثابت هستند و وقتی روی اونا […]
در این مطلب و مطلبهای بعدی میخوام چند استایل زیبا رو براتون قرار بدم. کدهای HTML : 1 2 3 4 5 6 7 8 9 <form class=“ac-custom ac-checkbox ac-cross”> <ul> <li><input id=“cb1” name=“cb1” type=“checkbox”><label for=“cb1”>Efficiently unleash information</label></li> <li><input id=“cb2” name=“cb2” type=“checkbox”><label for=“cb2”>Quickly maximize timely deliverables</label></li> <li><input id=“cb3” name=“cb3” type=“checkbox”><label for=“cb3”>Dramatically maintain solutions</label></li> <li><input id=“cb4” […]
در این مطلب و مطالب بعدی ، تعدادی کد برای هاور شدن روی لینک رو ، در اختیارتون میزارم. میبینید که هر وقت روی لینکها هاور ( hover ) میکنید ، استایل مربوطه فعال میشه. کدهای HTML : 1 2 3 <section class=“link-fadeinbg”> <p>It had been my luck to live en famille with some <a href=“#”>herder</a> Lapps […]
در این قسمت میخوام پنجمین کد ( code ) جالب رو در اختیارتون بدم. همونطور که دیدین ، قطره های باران که به زمین برخورد میکنن ، دقیقا شبیه به حالت واقعی هستند. کد HTML : 1 <canvas id = “c”></canvas> کدهای CSS : 1 2 3 4 5 6 7 8 9 10 * { […]
در این مطلب میخوام یک پلاگین jQuery بنام textarea-autosize رو خدمت شما معرفی کنم و اونو آموزش بدم. با استفاده از این پلاگین میتونین به راحتی هر چه تمامتر کاری کنید که زمانی که کاربر در textarea میخواد enter بزنه که بره به خط بعد ، ارتفاع هم به همون میزان اضافه بشه و هرچقد که کاربر Enter […]
در این قسمت میخوام کدهای یک پل معروف ( Golden Gate Bridge ) رو در اختیارتون بزارم. همونطور که دیدین ، این پل فقط با کمک کدهای CSS طراحی شده. هدف من از این مثال نشون دادن قدرت CSS است. برای دیدن عکسای واقعی این پل میتونین به این لینک برین. کد HTML : 1 […]
سلام تا به حال مطالب متنوعی راجع به تغییر ظاهر اسکرول دیدید یا خوندید خب امتحان کردید ولی جواب نمیدادن اما ما توی این پست یه روشی رو بهتون معرفی میکنیم که 100% تست شده است خب برای اینکار فایلی که برای دانلود قرار داده شده است رو دانلود کنید سپس در سایتتون با استفاده […]
در این مطلب میخوام یک حالت زیبا برای اعمال کردن به متن در اختیارتون قرار بدم. این حالت شبیه تیک زدن هست. مثل لامپی که خاموش روشن میشه و درست کار نمیکنه. مثل اینکه نویز داره. بخاطر همین هم اسمش رو glitch گذاشتن. کد HTML : 1 <div class=“glitch” data-text=“GLITCH”>GLITCH</div> کدهای CSS : 1 2 3 […]
در این مطلب میخوام کدی رو در اختیارتون قرار بدم که به وسیله ی اون میتونین مشخص کنید که بعد از به پایان رسیدن یک انیمیشن خاص ، چه دستوراتی اجرا شوند. این کارها رو با استفاده از jQuery انجام میدیم. کد مربوطه : 1 2 3 $(‘.element’).bind(‘oanimationend animationend webkitAnimationEnd MSAnimationEnd’, function() { //کدهایی که […]
در این مطلب و مطالب بعدی ، چهار نمونه کد زیبا برای Border بصورت انیمیشی در اختیارتون میزارم که میتونین برای زیباتر شدن سایتتون از اونا ایده بگیرین. کدهای HTML : 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <div class=“demo-1”> <div class=“grid”> <div class=“box”> <svg xmlns=“http://www.w3.org/2000/svg” width=“100%” height=“100%”> […]
در این مطلب و مطالب بعدی ، تعدادی نمونه کد زیبا برای Hover ، از سایتی معروف رو در اختیارتون میزارم که میتونین از اونا ایده بگیرین و یا دقیقا از همین مدل استفاده کنید. کدهای HTML : 1 2 3 4 5 6 7 8 9 10 11 12 <div class=“grid”> <figure class=“effect-lily”> <img src=“sample.jpg” […]
خیر در صورت اعلام قیمت اخبار آن در سایت قرار می گیرد.