معرفی 10 افکت css
معرفی css
در این مقاله تیم طراحی سایت اصفهان وب یار قصد دارد شما را با 10 افکت css آشنا کند. css زبانی برای استایل دهی به عناصر html است که به کمک آن می توانید به زیباسازی صفحات وب بپردازید. هنگامی که تگ هایی مانند <font> به html اضافه شدند، توسعه دهندگان وب را دچار نگرانی کرد؛ چرا که اضافه کردن رنگ و فونت در سایت های بزرگ در هر بخشی از صفحه بسیار زمان بر بود. برای حل همین مشکل، کنسرسیوم جهانی وب (W3C) پروژه CSS را شروع کرد.
با امکاناتی که css در اختیارمان قرار می دهد می توانیم طرح های بسیار زیبایی در صفحات سایت ایجاد کنیم. در این مقاله 10 افکت css را در اختیار شما دوستان وب یار قرار می دهیم. با ما همراه باشید تا قدرت css را به شما نشان دهیم.
1- تصویر سه بعدی
ممکن است در بعضی از سایت ها دیده باشید که وقتی موس را روی تصویر می برید، تصویر به صورت سه بعدی در می آید و متنی که در پشت آن پنهان شده به نمایش در می آید. در این قسمت می خواهیم این افکت زیبا را با کدهای html و css ایجاد کنیم بدون این که از کد جاوا اسکریپت استفاده نماییم.
کد html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css" type="text/css"> <title>Document</title> </head> <body> <div class="thumb"> <a href="#"> <span>the optimist lives on</span> </a> </div> </body> </html> |
کد css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
body { background: #ddd; background: linear-gradient(#ddd, #e8e8e8); font-family: 'Open Sans', sans-serif; height: 100vh; margin:0; } .thumb { width: 400px; height: 300px; margin: 70px auto; perspective: 1000px; } .thumb a { display: block; width: 100%; height: 100%; background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("image.jpg"); background-size: 0, cover; transform-style: preserve-3d; transition: all 0.5s; } .thumb:hover a { transform: rotateX(80deg); transform-origin: bottom; } .thumb a:after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 36px; background: inherit; background-size: cover, cover; background-position: bottom; transform: rotateX(90deg); transform-origin: bottom; } .thumb a span { color: white; text-transform: uppercase; position: absolute; top: 100%; left: 0; width: 100%; font: bold 12px/36px "Open Sans"; text-align: center; transform: rotateX(-89.99deg); transform-origin: top; z-index: 1; } .thumb a:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5); transition: all 0.5s; opacity: 0.15; transform: rotateX(95deg) translateZ(-80px) scale(0.75); transform-origin: bottom; } .thumb:hover a:before { opacity: 1; box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5); transform: rotateX(0) translateZ(-60px) scale(0.85); } |
نتیجه ی کد بالا را می توانید در تصویر زیر مشاهده کنید.
2- افکت css برای دکمه ها
قبلاً برای این که به کاربر نشان دهیم کدام قسمت قابل کلیک کردن است، رنگ متن را عوض می کردیم. ولی امروزه با افکت css می توانیم یک دکمه ی زیبا طراحی کنیم.
استایل دهی به دکمه ها (button) به خلاقیت نیاز دارد در این مطلب یک افکت css زیبا برای دکمه ها به نمایش گذاشته شده که کد آن را برای شما قرار می دهیم.
کد html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css" type="text/css"> <link href="http://fonts.googleapis.com/css?family=Cabin:400,500,600,bold" rel="stylesheet" type="text/css" > <link href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow:regular,bold" rel="stylesheet" type="text/css" > <title>Document</title> </head> <body> <div id="pagegradient"></div> <a class="button"> <span>press me</span> </a> </body> </html> |
کد css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 |
body { background: #A7A9AC; background-image: -webkit-gradient( linear, left top, right top, color-stop(.34, rgba(230,237,241,.05)), color-stop(.67, rgba(230,237,241,0))); -webkit-background-size: 5px 5px; } #pagegradient { background-image: -webkit-gradient( radial, 50% -50, 300, 50% 0, 0, from(rgba(230, 237, 241, 0)), to(rgba(230, 237, 241, 0.8))); height:100%; left:0px; position:absolute; top:0; width: 600px; } .button { position: absolute; top: 100px; left: 200px; display: inline-block; margin: 0 auto; -webkit-border-radius: 10px; -webkit-box-shadow: 0px 3px rgba(128,128,128,1), /* gradient effects */ 0px 4px rgba(118,118,118,1), 0px 5px rgba(108,108,108,1), 0px 6px rgba(98,98,98,1), 0px 7px rgba(88,88,88,1), 0px 8px rgba(78,78,78,1), 0px 14px 6px -1px rgba(128,128,128,1); /* shadow */ -webkit-transition: -webkit-box-shadow .1s ease-in-out; } .button span { background-color: #E8E8E8; background-image: /* gloss gradient */ -webkit-gradient( linear, left bottom, left top, color-stop(50%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,0.3)), color-stop(100%,rgba(255,255,255,0.2))), /* dark outside gradient */ -webkit-gradient( linear, left top, right top, color-stop(0%,rgba(210,210,210,0.3)), color-stop(20%,rgba(210,210,210,0)), color-stop(80%,rgba(210,210,210,0)), color-stop(100%,rgba(210,210,210,0.3))), /* light inner gradient */ -webkit-gradient( linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(20%,rgba(255,255,255,0.5)), color-stop(80%,rgba(255,255,255,0.5)), color-stop(100%,rgba(255,255,255,0))), /* diagonal line pattern */ -webkit-gradient( linear, 0% 100%, 100% 0%, color-stop(0%,rgba(255,255,255,0)), color-stop(40%,rgba(255,255,255,0)), color-stop(40%,#D2D2D1), color-stop(60%,#D2D2D1), color-stop(60%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,0))); -webkit-box-shadow: 0px -1px #fff, /* top highlight */ 0px 1px 1px #FFFFFF; /* bottom edge */ -webkit-background-size: 100%, 100%, 100%, 4px 4px; -webkit-border-radius: 10px; -webkit-transition: -webkit-transform .1s ease-in-out; display: inline-block; padding: 10px 40px 10px 40px; color: #3A474D; text-transform: uppercase; font-family: 'TradeGothicLTStd-BdCn20','PT Sans Narrow'; font-weight: 700; font-size: 32px; text-shadow: 0px 1px #fff, 0px -1px #262F33; } .button span:hover { color: #AEBF3B; text-shadow: 0px -1px #97A63A; cursor: pointer; } .button:active { -webkit-box-shadow: 0px 3px rgba(128,128,128,1), 0px 4px rgba(118,118,118,1), 0px 5px rgba(108,108,108,1), 0px 6px rgba(98,98,98,1), 0px 7px rgba(88,88,88,1), 0px 8px rgba(78,78,78,1), 0px 10px 2px 0px rgba(128,128,128,.6); /* shadow */ } .button:active span{ -webkit-transform: translate(0, 5px); /* depth of button press */ } .button span:after { content: ">"; display: block; width: 10px; height: 10px; position: absolute; right: 14px; top: 12px; font-family: 'Cabin'; font-weight: 700; color: #AEBF3B; text-shadow: 0px 1px #fff, 0px -1px #97A63A; font-size: 26px; } |
نتیجه به صورت زیر است :
3- ایجاد صفحه 404
یکی از ملاک های گوگل برای سئو سایت ، داشتن صفحه 404 می باشد ما در این قسمت یک نمونه کد css برای طراحی صفحه 404 قرار دادیم که بتوانید از آن ایده بگیرید.
کد html
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> <title>Document</title> </head> <body> <div class="hit-the-floor">404</div> </body> </html> |
کد css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.hit-the-floor { color: #fff; font-size: 12em; font-weight: bold; font-family: Helvetica; text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1) , 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25) , 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15); } .hit-the-floor { text-align: center;} body {background-color: #f1f1f1; } |
نتیجه را در تصویر زیر می توانید مشاهده کنید.
4- like و dislike
لایک و دیس لایک نظرات یکی از اصلی ترین راه های برقراری ارتباط کاربران با سایت است. بنابراین اگر تصمیم دارید از این امکان در سایت خود استفاده کنید در زیر یک نمونه کد برای استایل دهی به like و dislike قرار داده شده است.
کد html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css" type="text/css"> <title>Document</title> </head> <body> <div class="buttonHolder"> <a href="#" class="button tick"></a> <a href="#" class="button cross"></a> <a href="#" class="button heart"></a> <a href="#" class="button flower"></a> </div> </body> </html> |
کد css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 |
html, body{ min-height:100%; } body{ background-image:-webkit-linear-gradient(top, #edecec, #cecbc9); background-image:linear-gradient(top, #edecec, #cecbc9); } .buttonHolder{ margin:80px auto; width:400px; } .button{ background-image:-webkit-linear-gradient(top, #f4f1ee, #fff); background-image:linear-gradient(top, #f4f1ee, #fff); border-radius:50%; box-shadow:0px 8px 10px 0px rgba(0, 0, 0, .3), inset 0px 4px 1px 1px white, inset 0px -3px 1px 1px rgba(204,198,197,.5); float:left; height:70px; margin:0 30px 30px 0; position:relative; width:70px; -webkit-transition: all .1s linear; transition:all .1s linear; } .button:after{ color:#e9e6e4; content: ""; display: block; font-size: 30px; height: 30px; text-decoration: none; text-shadow: 0px -1px 1px #bdb5b4, 1px 1px 1px white; position: absolute; width: 30px; } .heart:after{ content:"❤"; left: 21px; top: 16px; } .flower:after{ content:"✿"; left: 23px; top: 14px; } .tick:after{ content:"✔"; left:23px; top:16px; } .cross:after{ content:"✖"; left: 24px; top: 15px; } .button:hover{ background-image: -webkit-linear-gradient(top, #fff, #f4f1ee); background-image:linear-gradient(top, #fff, #f4f1ee); color:#0088cc; } .heart:hover:after{ color:#f94e66; text-shadow:0px 0px 6px #f94e66; } .flower:hover:after{ color:#f99e4e; text-shadow:0px 0px 6px #f99e4e; } .tick:hover:after{ color:#83d244; text-shadow:0px 0px 6px #83d244; } .cross:hover:after{ color:#eb2f2f; text-shadow:0px 0px 6px #eb2f2f; } .button:active{ background-image:-webkit-linear-gradient(top, #efedec, #f7f4f4); background-image:linear-gradient(top, #efedec, #f7f4f4); box-shadow:0 3px 5px 0 rgba(0,0,0,.4), inset 0px -3px 1px 1px rgba(204,198,197,.5); } .button:active:after{ color:#dbd2d2; text-shadow:0px -1px 1px #bdb5b4, 0px 1px 1px white; } |
نتیجه به صورت زیر خواهد بود.
5- منو
هیچ سایتی را نمی توان بدون منو پیدا کرد. کدنویسی این منوها معمولاً با HTML و CSS انجام می شود. در این مقاله یک منو را آماده کرده ایم که فقط با کدهای css طراحی شده و هیچ گونه کد جاوا اسکریپت داخل آن استفاده نشده است تا در همه ی مرورگر ها بدون هیچ مشکلی نمایش داده شود.
کد html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css" type="text/css"> <link href='https://fonts.googleapis.com/css?family=Roboto:500,900,100,300,700,400' rel='stylesheet' type='text/css'> <title>Document</title> </head> <body> <section style="background: #f1c40f; color: rgba(0, 0, 0, 0.5);"> <h2>Shift</h2> <nav class="shift"> <ul> <li><a href="#">صفحه اصلی</a></li> <li><a href="#">دانلودها</a></li> <li><a href="#">درباره ما</a></li> <li><a href="#">تماس با ما</a></li> </ul> </nav> </section> </body> </html> |
کد css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 |
body { font-family: 'Roboto', sans-serif; padding: 0; margin: 0; } small { font-size: 12px; color: rgba(0, 0, 0, 0.4); } h1 { text-align: center; padding: 50px 0; font-weight: 800; margin: 0; letter-spacing: -1px; color: inherit; font-size: 40px; } h2 { text-align: center; font-size: 30px; margin: 0; font-weight: 300; color: inherit; padding: 50px; } .center { text-align:center; } section { height:100vh; } /* NAVIGATION */ nav { width:50%; margin:0 auto; background:#fff; padding:50px 0; box-shadow:0px 5px 0px #dedede; } nav ul { list-style: none; text-align: center; } nav ul li { display: inline-block; } nav ul li a { display:block; padding:15px; text-decoration: none; color:#aaa; font-weight: 800; text-transform:uppercase; margin: 0 10px; } nav ul li a, nav ul li a:after, nav ul li a:before { transition: all .5s; } nav ul li a:hover { color: #555; } /* SHIFT */ nav.shift ul li a { position:relative; z-index: 1; } nav.shift ul li a:hover { color: #91640F; } nav.shift ul li a:after { display: block; position: absolute; top:0; left:0; bottom:0; right:0; margin: auto; width: 100%; height: 1px; content: '.'; color: transparent; background: #F1C40F; visibility: none; opacity: 0; z-index: -1; } nav.shift ul li a:hover:after { opacity: 1; visibility: visible; height: 100%; } /* Keyframes */ @-webkit-keyframes fill { 0% { width: 0%; height: 1px; } 50% { width: 100%; height: 1px; } 100% { width: 100%; height: 100%; background: #333; } } /* Keyframes */ @-webkit-keyframes circle { 0% { width: 1px; top: 0; left: 0; bottom: 0; right: 0; margin: auto; height: 1px; z-index: -1; background: #eee; border-radius: 100%; } 100% { background: #aaa; height: 5000%; width: 5000%; z-index: -1; top: 0; bottom: 0; left: 0; right: 0; margin: auto; border-radius: 0; } } |
خروجی کد به صورت زیر است.
6- افکت css برای تصاویر
در این قسمت یک افکت css زیبا برای تصاویر قرار داده شده است که وقتی موس را روی تصویر می برید به یک حالت فوق العاده جذاب در می آید. این افکت ها با CSS Transitions و Transform ایجاد شده اند و از هیچ کد JavaScript در آن ها استفاده نشده است تا روی مرورگرهای بیشتری بدون مشکل اجرا شوند.
کد html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css" type="text/css"> <title>Document</title> </head> <body> <div class="morph pic"> <img src="http://lorempixel.com/300/300/nature/5" alt="beach"> </div> </body> </html> |
کد css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } body { background: #333; } .pic { border: 10px solid #fff; float: left; height: 300px; width: 300px; margin: 20px; overflow: hidden; -webkit-box-shadow: 5px 5px 5px #111; box-shadow: 5px 5px 5px #111; } /*MORPH*/ .morph { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease; } .morph:hover { border-radius: 50%; -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } |
اجرای کد بالا به صورت زیر است.
7- hover تصاویر
زمانی که نشانگر موس را روی تصویر می برید، یعنی تصویر hover شده است. در این قسمت یک افکت css برای تصویر قرار داده شده است تا زمانی که تصویر hover می شود، تصویر کم رنگ تر شده و یک متن روی آن نمایش داده شود. زمانی هم که موس را از روی تصویر بردارید دوباره می توانید تصویر را به حالت اولیه مشاهده کنید.
کد html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href="../favicon.ico"> <link rel="stylesheet" type="text/css" href="style_common.css" /> <link rel="stylesheet" type="text/css" href="style1.css" /> <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css' /> </head> <body> <div class="container"> <div class="main"> <div class="view view-first"> <img src="1.jpg" /> <div class="mask"> <h2>طراحی سایت وب یار</h2> <p>طراحی سایت وب یار</p> <a href="#" class="info">بیشتر</a> </div> </div> </div> </div> </body> </html> |
کد css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 |
.view { width: 300px; height: 200px; margin:10px 0 0 180px; float: left; border: 10px solid #fff; overflow: hidden; position: relative; text-align: center; -webkit-box-shadow: 1px 1px 2px #e6e6e6; -moz-box-shadow: 1px 1px 2px #e6e6e6; box-shadow: 1px 1px 2px #e6e6e6; cursor: default; background: #fff url(../images/bgimg.jpg) no-repeat center center; } .view .mask,.view .content { width: 300px; height: 200px; position: absolute; overflow: hidden; top: 0; left: 0; } .view img{ display:block; position:relative; } .view h2 { text-transform:uppercase; color:#fff; text-align:center; position:relative; font-size:17px; padding:10px; background:rgba(0, 0, 0, 0.8); margin:20px 0 0 0; } .view p{ font-family:Georgia, serif; font-style:italic; font-size:12px; position:relative; color:#fff; padding:10px 20px 20px; text-align:center; } .view a.info{ display:inline-block; text-decoration:none; padding:7px 14px; background:#000; color:#fff; text-transform:uppercase; -webkit-box-shadow:0 0 1px #000; -moz-box-shadow:0 0 1px #000; box-shadow:0 0 1px #000; } .view a.info: hover{ -webkit-box-shadow:0 0 5px #000; -moz-box-shadow:0 0 5px #000; box-shadow:0 0 5px #000; } .view-first img { -webkit-transition:all 0.2s linear; -moz-transition:all 0.2s linear; -o-transition:all 0.2s linear; -ms-transition:all 0.2s linear; transition:all 0.2s linear; } .view-first .mask { -ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter:alpha(opacity=0); opacity:0; background-color:rgba(219,127,8, 0.7); -webkit-transition:all 0.4s ease-in-out; -moz-transition:all 0.4s ease-in-out; -o-transition:all 0.4s ease-in-out; -ms-transition:all 0.4s ease-in-out; transition:all 0.4s ease-in-out; } .view-first h2 { -webkit-transform:translateY(-100px); -moz-transform:translateY(-100px); -o-transform:translateY(-100px); -ms-transform:translateY(-100px); transform:translateY(-100px); -ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter:alpha(opacity=0); opacity:0; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out; -ms-transition:all 0.2s ease-in-out; transition:all 0.2s ease-in-out; } .view-first p{ -webkit-transform:translateY(100px); -moz-transform:translateY(100px); -o-transform:translateY(100px); -ms-transform:translateY(100px); transform:translateY(100px); -ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter:alpha(opacity=0); opacity:0; -webkit-transition:all 0.2s linear; -moz-transition:all 0.2s linear; -o-transition:all 0.2s linear; -ms-transition:all 0.2s linear; transition:all 0.2s linear; } .view-first:hover img{ -webkit-transform:scale(1.1,1.1); -moz-transform:scale(1.1,1.1); -o-transform:scale(1.1,1.1); -ms-transform:scale(1.1,1.1); transform:scale(1.1,1.1); } .view-first a.info { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out; -ms-transition:all 0.2s ease-in-out; transition:all 0.2s ease-in-out; } .view-first:hover .mask { -ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; } .view-first:hover h2, .view-first:hover p, .view-first:hover a.info { -ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter:alpha(opacity=100); opacity:1; -webkit-transform:translateY(0px); -moz-transform:translateY(0px); -o-transform:translateY(0px); -ms-transform:translateY(0px); transform:translateY(0px); } .view-first:hover p{ -webkit-transition-delay:0.1s; -moz-transition-delay:0.1s; -o-transition-delay:0.1s; -ms-transition-delay:0.1s; transition-delay:0.1s; } .view-first:hover a.info{ -webkit-transition-delay:0.2s; -moz-transition-delay:0.2s; -o-transition-delay:0.2s; -ms-transition-delay:0.2s; transition-delay:0.2s; } |
خروجی کد
8- ترکیب انیمیشن و فیلترها
شما می توانید فیلتر های متعدد را با انیمیشن ها ترکیب کنید و افکت های فوق العاده ای را برای تصاویر ایجاد نمایید. یک نمونه از ترکیب انیمیشن و فیلتر را برای شما قرار داده ایم که شما می توانید کد آن را در زیر مشاهده نمایید.
کد html
|
1 2 3 4 5 6 7 |
<html> <head> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/foggy-545838_960_720.jpg"></body> </html> |
کد css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
body {text-align: center} img {max-width: 100%;width: 600px;} img { animation: haunted 3s infinite; } @keyframes haunted { 0%{filter:brightness(20%);} 48%{filter:brightness(20%);} 50%{filter:sepia(1) contrast(2) brightness(200%);} 60%{filter:sepia(1) contrast(2) brightness(200%);} 62%{filter:brightness(20%);} 96%{filter:brightness(20%);} 96%{filter:brightness(400%);} }body { text-align: center; } img{max-width: 100%;width:600px;} img{animation: haunted 3s infinite;} @keyframes haunted { 0% {filter: brightness(20%);} 48%{filter: brightness(20%);} 50%{filter: sepia(1) contrast(2) brightness(200%);} 60%{filter: sepia(1) contrast(2) brightness(200%);} 62%{filter: brightness(20%);} 96%{filter: brightness(20%);} 96%{filter: brightness(400%);} } |
خروجی کد
9 – تغییر رنگ تصویر به خاکستری با استفاده از css
می توانید با قطعه کد زیر تصاویرتان را به رنگ خاکستری در بیاورید. هرچه مقدار grayscale بیشتر شود، تصویر به رنگ خاکستری نزدیک تر می شود.
|
1 2 3 4 |
img { -webkit-filter:grayscale(100%); filter: grayscale(100%); } |
خروجی کد بالا
10 – چراغ چشمک زن با css
این افکت فوق العاده زیبا به این صورت است که انگار یک چراغ چشمک زن درون متن قرار گرفته است. نکته ی قابل توجه این جاست که این افکت بدون هیچ کد جاوا اسکریپت ایجاد شده است.
کد html
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> <title>Document</title> </head> <body> <div class="area"> webyar </div> </body> </html> |
کد css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
@import url(https://fonts.googleapis.com/css?family=Open+Sans); body { background: #111; font-family: "Open Sans", Impact; } .area { text-align: center; font-size: 6.5em; color: #fff; letter-spacing: -7px; font-weight: 700; text-transform: uppercase; animation: blur 1.2s ease-out infinite; text-shadow: 0px 0px 5px #fff, 0px 0px 7px #fff; } @keyframes blur { from { text-shadow:0px 0px 10px #fff, 0px 0px 10px #fff, 0px 0px 25px #fff, 0px 0px 25px #fff, 0px 0px 25px #fff, 0px 0px 25px #fff, 0px 0px 25px #fff, 0px 0px 25px #fff, 0px 0px 50px #fff, 0px 0px 50px #fff, 0px 0px 50px #7B96B8, 0px 0px 150px #7B96B8, 0px 10px 100px #7B96B8, 0px 10px 100px #7B96B8, 0px 10px 100px #7B96B8, 0px 10px 100px #7B96B8, 0px -10px 100px #7B96B8, 0px -10px 100px #7B96B8; } } |
خروجی کد را می توانید در تصویر مشاهده کنید.
نتیجه
در این آموزش با 10 افکت css از جمله سه بعدی کردن تصویر، تغییر رنگ تصویر، طراحی صفحه 404 و موارد دیگر آشنا شدید که احتمالاً ذهنیت شما را در مورد css تغییر داده است. افکت اسکرولی css بخش دیگری از افکت های css است که در مقاله ای دیگر برای شما توضیح خواهیم داد. برای آگاه شدن از دیگر آموزش های دیگر طراحی سایت وب یار از به صفحه ی اینستاگرام وب یار بپویندید.
ساخت سایت رایگان خارجی یکی از دغدغه‌های مهم افراد برای پیشبرد اهداف کاری است. در واقع ایجاد سایت توسط شرکت‌های معتبر، هزینه‌های زیادی در بر دارد، به همین دلیل است که افراد تلاش می‌کنند از طریق یادگیری نحوه ایجاد سایت به صورت رایگان و یا کمک گرقفتن از شرکت‌هایی که اقدام به ساخت سایت رایگان می‌کنند، این هزینه‌ها را برای خود به میزان قابل توجهی کاهش دهند. اما برای انجام این کار چه باید کرد؟ به طور کلی در فضای اینترنت آموزش‌های مختلفی برای این منظور ارائه شده است که مشاهده آن‌ها می‌تواند تا حد زیادی به شما برای این منظور کمک کند، اما راهنمایی گرفتن از شرکت‌های فعال طراحی سایت در این امر نیز یک مسئله ضروری است. در وهله اول لازم است که شما نوع سایتی را که می‌خواهید ایجاد کنید، انتخاب کنید. پس از آن یک قالب را به صورت سفارشی تعیین کنید و کار را آغاز کنید. برای ساخت سایت رایگان به چه چیزهایی نیاز است؟ ابتدا باید به دنبال یک سازنده سایت باشید، در واقع چنین شرکت‌هایی این امکان را به شما می‌دهند که پس از ساخت سایت، در فضای اینترنت جایگاه مناسبی برای خود به دست آورید. البته در هنگام تلاش برای کمک گرفتن از یک شرکت معتبر و باتجربه در این زمینه، حتما به چند نکته از جمله داشتن نمونه کار معتبر، داشتن […]
طراحی وب‌سایت به ساخت، راه‌اندازی و دیزاین صفحات وب گفته میشود که در ادامه با مزیت ساخت سایت در اصفهان آشنا می شویم. وب‌سایت‌ها با استفاده از زبان کدنویسی طراحی می‌شوند. اما امروزه با پیشرفت فناوری، توانایی‌ها و ویژگی‌های برنامه‌های ساخت وب‌سایت‌ها افزایش یافته و کار را برای برنامه‌نویسان و طراحان وب آسان‌تر کرده است. با توسعه فناوری و استفاده روز افزون مردم از تکنولوژی‌های پیشرفته و همینطور تاثیر شیوع کرونا، باعث شد تا مردم نیازهای خود را به صورت آنلاین و حضوری برطرف کنند. همینطور اکثر شرکت‌ها و حتی فروشگاه‌ها کلیه خدمات خود را به صورت اینترنتی در اختیار کاربران و مشتریان خود قرار می‌دهند. از این رو وب‌سایت‌ها اهمیت بسیار زیادی دارند. وب‌سایت‌ها انواع مختلفی از جمله وب‌سایت‌های فروشگاهی، شرکتی، خدماتی و… دارند. طراحی یک وب‌سایت حرفه‌ای می‌تواند شما را در جذب مشتری در اصفهان و شهر‌های دیگر کمک کند، مشتریانی که هم می‌توانند توریست باشند و هم از افراد خود اصفهان. طراحی یک وب‌سایت به خدماتی بستگی دارد که افراد می‌توانند به مشتریان خود ارائه دهند. افراد با طراحی یک وب‌سایت می‌تواند محصولات و یا خدمات خود را به همه مردم ایران و یا حتی جهان معرفی کنند. این خدمات می‌تواند خدمات فروشگاهی و راهبردی باشند. از این رو انتخاب شرکتی که بهترین و به روزترین خدمات ساخته وب‌سایت در اصفهان برای طراحی انواع وب‌سایت‌های تجاری را […]
دنیای امروزه دنیای ارتباطات می باشد واهمیت رسانه ها بیشتر از همیشه احساس می شود. شبکه های اجتماعی با هدف ارتباط گرفتن افراد به وجود آمد و امروزه برای تبلیغات کسب و کارها بسیار مهم تلقی می شود. درعصر ارتباطات اغلب کسب وکارها برای پیشرفت زمینه ی شغلی خود به سمت تبلیغات در شبکه های اجتماعی روی آورده اند.شبکه های اجتماعی محبوب در اطلاع رسانی برای خبرهای روزانه نقش بسیار مهمی را ایفا می کنند. با وب یار همراه باشید تا با بهترین شبکه های اجتماعی در ایران آشنا شویم. در جامعه ی امروزی شبکه های اجتماعی جزئی از زندگی مردم شده که برای تبلیغات ،اطلاع رسانی ها و آموزش و…از این شبکه ها بهره می برند.باتوجه به همگانی شدن شبکه های اجتماعی بین مردم لازم است که در مورد هر کدام از این شبکه ها اطلاعاتی کسب کنیم تا از جوامع امروز عقب نمانیم. تاریخچه مختصری در مورد شبکه های اجتماعی : ریشه شکل گرفتن مفهوم شبکه های اجتماعی در سال 1960در دانشگاه ایلی نویز در آمریکا بود.و بعد از روی کار آمدن مفهوم شبکه های اجتماعی در سال 1997سایتی تشکیل شد که اجازه ایجاد پروفایل به افرادمختلف را داد هدف این سایت جمع کردن لیستی از دوستان در کنار هم بود و بعد از آن هم شبکه های اجتماعی مختلفی با اهداف متنوع روی کار آمد. در سال […]
طراحی قالب وردپرس امروزه طرفداران زیادی پیدا کرده است. وردپرس یک سیستم مدیریت محتوای قوی است که می توان با آن قالب های زیبایی طراحی کرد. در مطلب امروز وب یار می خواهیم با نحوه طراحی قالب وردپرس آشنا شویم. بیشتر سایت های دنیای وب امروزی با این سیستم مدیریت طراحی می شودو بازار کار خوبی دارد به ویژه اگر این قالب مختص کسب وکار شما باشد و با توجه به نیاز ها و سلایق شما طراحی شده باشد در این صورت است که علاوه برتکراری نبودن پاسخگوی نیازهای مجموعه شما می باشد. بررسی انواع قالب سایت قالب سایت چیست؟ ابتدا بهتر است کمی به تاریخچه آن بپردازیم. در آغاز قرن جاری و در زمانی که اینترنت هنوز در ابتدای راه خود بود، صفحات سایت‌ها به شکل ساده‌ای طراحی می‌شدند که از چند متن ساده، چند باکس رنگارنگ و شاید یک یا دو تصویر تشکیل شده بودند. تنها افرادی که دارای صفحات وب بودند، کسانی بودند که تخصص فنی در اچ‌تی‌ام‌‌ال برای ساختن یک صفحه سایت را داشتند یا می‌توانستند هزینه انجام این کار را به افرادی که این کار را می‌کردند، پرداخت کنند. اما از آن زمان تاکنون تغییرات زیادی صورت گرفته است و اکنون پلتفرم‌های آنلاین زیادی وجود دارند که به افرادی که تجربه طراحی یا برنامه‌نویسی نسبتا کمی دارند، توانایی اجرای یک وب‌سایت کاملاً کارآمد را می‌دهند. […]
ساخت نرم افزار بدون کد نویسی و با استفاده از کدنویسی انجام میشود. در این مقاله از وب یار قصد داریم تا به چگونگی ساخت نرم افزار تحت ویندوز بدون کد نویسی و مزایای آن نسبت به روش‌های قدیمی بپردازیم. با پیشرفت تکنولوژی بستر استفاده از موبایل‌ها و کامپیوترها گسترده‌تر شده است، زیرا روز به روز به تعداد کاربران آن‌ها افزوده میشود. اگر شما نیز ایده‌ای برای تولید نرم افزار و سرویس‌دهی در این بستر را دارید، بهتر است هر چه سریعتر دست به کار شوید و از این فضا که پتانسیل بالایی دارد برای کسب درآمد استفاده کنید. ساخت نرم افزار بدون کد نویسی چگونه ممکن است؟ این روزها دیگر نیاز نیست تا پروسه‌ی طولانی آموزش برنامه نویسی را طی کنید تا بتوانید به ساخت نرم افزارها بپردازید. در گذشته اگر قصد ساخت برنامه‌ای را داشتید باید ساعت‌ها زمان صرف می‌کردید تا با استفاده از کدها دستور العمل‌هایی را برای برنامه تعریف کنید تا عملکرد درستی داشته باشد. همچنین پس از تعریف آن دستور العمل‌ها باید مراحل آزمون و خطا را طی می‌کردید تا به اصطلاح برنامه‌ای که ساخته‌ای را باگ گیری (اشکال‌گیری) کنید. اما دیگر ساخت نرم افزار بدون کد نویسی یک رویا نیست! متخصصان نرم افزارهای زیادی را به عنوان ابزارهای کمکی طراحی کرده‌اند تا کاربران بتوانند بدون نوشتن حتی یک خط کد، نرم افزار ایده‌آل خود […]
در این لینک مقالات مرجع جاوا اسکریپت برای شما عزیزان فراهم شده تا دسترسی راحت تری به مطالب حوزه جاوااسکریپت داشته باشید. آموزش زبان جاوا اسکریپت javascript + جلسه اول زبان برنامه نویسی جاوا اسکریپت یک زبان سمت کلاینت (کاربر) است و روی اکثر مرورگر های امروزی کار می کند. این زبان به تمام خصوصیت های عناصر html و css دسترسی داشته و نسبت به رویدادهای کاربر واکنش نشان می دهد محل قرار گیری کدهای جاوا اسکریپت + جلسه دوم تگ های جاوا اسکریپت این توانایی را دارند که در هر جایی از صفحات html به کار روند. آموزش دستورات مهم جاوا اسکریپت + جلسه سوم دستور جاوا اسکریپت شامل مقادیر، عملگرها،کلمات کلیدی و توضیحات است.دستورات جاوا اسکریپت زیر همان کلمات کلیدی رزرو شده ای هستند که نمی توانند به عنوان نام متغیر به کار روند. آموزش توضیحات در جاوا اسکریپت + جلسه چهارم توضیحات در جاوا اسکریپت به دو صورت به کار می روند: 1- توضیحات تک خطی 2- توضیحات چند خطی تعریف متغیرها در جاوا اسکریپت + قسمت پنجم متغیرها در javaScript حافظ و حامل اطلاعات هستند. یعنی این متغیرها اطلاعاتی را در خود ذخیره نموده و در حین اجرای برنامه با شرایط مختلف تغییر می کنند. انواع داده ها در JavaScript + جلسه ششم زبان جاوا اسکریپت نیز همانند سایر زبان های برنامه نویسی از انواع داده های عددی (Number) ، رشته ای (String) ، […]