0

هیچ محصولی در سبد خرید نیست.

طراحی سایت در اصفهان | سئو سایت اصفهان | طراحی سایت اصفهان
طراحی سایت در اصفهان, سئو سایت اصفهان, ساخت سایت اصفهان, طراحی سایت حرفه ای اصفهان, بهینه سازی سایت , بازاریابی و دیجیتال مارکتینگ 09133886881 احمدپور

معرفی 10 افکت css

نویسنده پشتیبانی وب یار
امتیاز مطلب
تعداد بازدید 1998
تاریخ بروزرسانی ۷ دی ۱۴۰۰

معرفی css

در این مقاله تیم طراحی سایت اصفهان وب یار قصد دارد شما را با 10 افکت css آشنا کند. css زبانی برای استایل دهی به عناصر html است که به کمک آن می توانید به زیباسازی صفحات وب بپردازید. هنگامی که تگ هایی مانند <font> به  html اضافه شدند، توسعه دهندگان وب را دچار نگرانی کرد؛ چرا که اضافه کردن رنگ و فونت در سایت های بزرگ در هر بخشی از صفحه بسیار زمان بر بود. برای حل همین مشکل، کنسرسیوم جهانی وب (W3C) پروژه CSS را شروع کرد.

با امکاناتی که css در اختیارمان قرار می دهد می توانیم طرح های بسیار زیبایی در صفحات سایت ایجاد کنیم. در این مقاله 10 افکت css را در اختیار شما دوستان وب یار قرار می دهیم. با ما همراه باشید تا قدرت  css را به شما نشان دهیم.

 

1- تصویر سه بعدی

ممکن است در بعضی از سایت ها دیده باشید که وقتی موس را روی تصویر می برید، تصویر به صورت سه بعدی در می آید و متنی که در پشت آن پنهان شده به نمایش در می آید. در این قسمت می خواهیم این افکت زیبا را با کدهای html و css ایجاد کنیم بدون این که از کد جاوا اسکریپت استفاده نماییم.

کد html

<!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

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);
}

نتیجه ی کد بالا را می توانید در تصویر زیر مشاهده کنید.

 

افکت css

 

2- افکت css برای دکمه ها

قبلاً برای این که به کاربر نشان دهیم کدام قسمت قابل کلیک کردن است، رنگ متن را عوض می کردیم. ولی امروزه با افکت css می توانیم یک دکمه ی زیبا طراحی کنیم.

استایل دهی به دکمه ها (button) به خلاقیت نیاز دارد در این مطلب یک افکت css زیبا برای دکمه ها به نمایش گذاشته شده که کد آن را برای شما قرار می دهیم.

کد html

<!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

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;
    }

نتیجه به صورت زیر است :

 

افکت css

 

3- ایجاد صفحه 404

یکی از ملاک های گوگل برای سئو سایت ، داشتن صفحه 404 می باشد ما در این قسمت یک نمونه کد css برای طراحی صفحه 404 قرار دادیم که بتوانید از آن ایده بگیرید.

کد html

<!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

.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;
}

نتیجه را در تصویر زیر می توانید مشاهده کنید.

 

افکت css

 

4- like و dislike

لایک و دیس لایک نظرات یکی از اصلی ترین راه های برقراری ارتباط کاربران با سایت است. بنابراین اگر تصمیم دارید از این امکان در سایت خود استفاده کنید در زیر یک نمونه کد برای استایل دهی به like و dislike قرار داده شده است.

کد html

<!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

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;
		}

نتیجه به صورت زیر خواهد بود.

 

افکت css

 

5- منو

هیچ سایتی را نمی توان بدون منو پیدا کرد. کدنویسی این منوها  معمولاً با HTML و CSS انجام می شود. در این  مقاله یک منو را آماده کرده ایم که فقط با کدهای css طراحی شده و هیچ گونه کد جاوا اسکریپت داخل آن استفاده نشده است تا در همه ی مرورگر ها بدون هیچ مشکلی نمایش داده شود.

کد html

<!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

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;
  }
}

خروجی کد به صورت زیر است.

 

افکت css

 

6- افکت css برای تصاویر

در این قسمت یک افکت css زیبا برای تصاویر قرار داده شده است  که وقتی موس را روی تصویر می برید به یک حالت فوق العاده جذاب در می آید. این افکت ها با CSS Transitions و Transform ایجاد شده اند و از هیچ کد JavaScript  در آن ها استفاده نشده است تا روی مرورگرهای بیشتری بدون مشکل اجرا شوند.

کد html

<!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="https://lorempixel.com/300/300/nature/5" alt="beach">
</div>
</body>
</html>

کد css

* {
  -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);
}

اجرای کد بالا به صورت زیر است.

 

css برای تصاویر

 

7- hover تصاویر

زمانی که نشانگر موس را روی تصویر می برید، یعنی تصویر hover شده است. در این قسمت یک افکت css برای تصویر قرار داده شده است تا زمانی که تصویر hover می شود، تصویر کم رنگ تر شده و یک متن روی آن نمایش داده شود. زمانی هم که موس را از روی تصویر بردارید دوباره می توانید تصویر را به حالت اولیه مشاهده کنید.

کد html

<!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

.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;
}

خروجی کد

 

افکت css

 

8-  ترکیب انیمیشن و فیلترها

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

کد html

<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

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%);}
}

خروجی کد

 

افکت css

 

9 – تغییر رنگ تصویر به خاکستری با استفاده از css

می توانید با قطعه کد زیر تصاویرتان را به رنگ خاکستری در بیاورید. هرچه مقدار grayscale بیشتر شود، تصویر به رنگ خاکستری نزدیک تر می شود.

img { 
 -webkit-filter:grayscale(100%); 
filter: grayscale(100%);
}

خروجی کد بالا

 

افکت css

 

10 – چراغ چشمک زن با css

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

کد html

<!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

@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;
  }
}

خروجی کد را می توانید در تصویر مشاهده کنید.

 

افکت css

 

نتیجه

در این آموزش با 10 افکت css از جمله  سه بعدی کردن تصویر، تغییر رنگ تصویر، طراحی صفحه 404 و موارد دیگر آشنا شدید که احتمالاً ذهنیت شما را در مورد css تغییر داده است. افکت اسکرولی css بخش دیگری از افکت های css است که در مقاله ای دیگر برای شما توضیح خواهیم داد. برای آگاه شدن از دیگر آموزش های دیگر طراحی سایت وب یار از به صفحه ی اینستاگرام وب یار بپویندید.

0/5 (0 Reviews)
مطالب مرتبط
آموزش طراحی منو رسپانسیو Responsive
مطالعه :

آموزش طراحی منو رسپانسیو Responsive

با آموزش منو ریسپانسیو Responsive واکنش گرا از تیم وب یار خدمت شما هستیم,اگر اصول کلی در مورد کدهای ریسپانسیو را نمیدانید و میخواهید صحفه ای ریسپانسیو بسازید حتما مطلب آموزش کدهای طراحی سایت ریسپانسیوResponsive را بخوانید. آموزش طراحی منو ریسپانسیو Responsive قدم به قدم با من همراه باشید تا ببینید که به چه راحتی به طراحی و کدنویسی یک منو ریسپانسیو (واکنش گرا) میپردازیم,و شما پس از یاد گرفتن کدهای طراحی منو واکنش گرا به راحتی میتوانید منو ریسپانسیو داشته باشید که در حالت عادی به صورت افقی نمایش داده بشود,و در صفحه نمایش هایی همانند موبایل ,تبلت,به صورت یک آیکون نمایش داده شود که با کلیک کردن بر روی این آیکون منو به صورت منوی کشویی ریسپانسیو نمایش داده شود. برای این کار ما از هیچ فریم ورکی استفاده نمیکنیم . خودمون با Media Query ها این کار رو به راحتی انجام میدیم . اول از همه بذارید با منطق این موضوع آشناتون کنم . ما با استفاده از Media Queries میتونیم تعیین کنیم که صفحه ی وبمون تو هر رزولوشن به چه شکلی نمایش داده بشه . برای منویی که قراره ایجاد کنیم هم به همین صورت عمل می کنیم . یک منو طراحی می کنیم و با استفاده از media query و کدهای css تعیین می کنیم که در رزولوشن های بالا منو بصورت عادی نمایش […]

آموزش طراحی فلت
مطالعه :

آموزش طراحی فلت در اصفهان

حالا چند وقتیه که  اصطلاح طراحی فلت خیلی باب شده,البته بهتر بگم چندین سال,من هم امروز تصمیم گرفتم درباره ی آموزش طراحی فلت در اصفهان مقاله جدیدی در وب یار قرار بدهم.تا کسانی که مایل به دانستن اطلاعات درباره ی طراحی فلت هستند,به اطلاعاتی جامع و کامل از طراحی فلت برسند.خب حالا قدم‌ به‌ قدم تا انتهای این پست با من باشید تا ببنید که چه مطالب مفیدی از طراحی فلت بدست می آورید. خب خیلی وقتتون رو نمی‌گیرم و سریع شروع میکنم. اول از همه:طراحی فلت چیست (flat design) طراحی فلت به نوع جدیدی از طراحی گفته میشود که اول ازهمه در کشورهای خارجی باب شد. که در آن از نوع خاصی از رنگ ها ,آیکون ها و محدودیت های خاص خودش استفاده میشه و یک شعار خاص. در واقع همه چیز ساده است اما زیبا… در طراحی تخت به مانند طراحی سنتی دیگر از سایه‌های مخلتف ، گرادینت‌ها ، آنیمیشن‌ها ، تکسچرها و پترنها استفاده نمی‌شود.این نوع طراحی clean ، ساده و دارای یک ساختار تمیز و مرتب است ، فضای خالی زیاد دارد ، رنگ‌ها روشن، ساده و یکپارچه هستند، همه‌ی المان‌ها ۲ بعدی می‌باشند ، گوشه‌ها شارپ هستند ، روی تایپوگرافی نوشته‌ها کار شده است و دکمه‌ها و المان‌ها یک دست بدون سایه و برآمدگی هستند.نمونه های معروف شروع به کار طراحی فلت رو در طراحی […]

تغییر فونت در ویژوال استدیو
مطالعه :

تغییر فونت و رنگ در ویژوال استدیو

روش های مختلفی برای تغییر فونت و رنگ در ویژوال استدیو وجود دارد. به عنوان مثال، می‌توانید تم تیره پیش‌فرض (که به آن «حالت تاریک» نیز گفته می‌شود) به یک تم روشن، یک تم آبی، یک تم با کنتراست اضافی، یا موضوعی که با تنظیمات سیستم شما مطابقت دارد، تغییر دهید. همچنین می توانید نوع فونت و اندازه متن را هم در IDE و هم در ویرایشگر کد تغییر دهید. تم رنگ را تغییر دهید در نوار منو، Tools > Options را انتخاب کنید. در لیست گزینه ها، Environment > General را انتخاب کنید. با استفاده از فهرست تم رنگی، تم پیش‌فرض تیره، تم روشن، تم آبی یا آبی (کنتراست اضافی) را انتخاب کنید. همچنین می توانید با انتخاب گزینه Use system setting، از تم مورد استفاده ویندوز استفاده کنید.   توجه داشته باشید! وقتی تم رنگی را تغییر می‌دهید، متن در IDE به فونت‌ها و اندازه‌های پیش‌فرض یا سفارشی‌شده قبلی برای آن تم باز می‌گردد.   تغییر فونت و اندازه متن می‌توانید فونت و اندازه متن را برای تمام پنجره‌های قاب و ابزار IDE یا فقط برای پنجره‌ها یا عناصر متنی خاص تغییر دهید. برای تغییر اندازه فونت و متن در IDE در نوار منو، Tools > Options را انتخاب کنید.  گزینه ها، Environment > Fonts and Colors را انتخاب کنید. در لیست Show settings for Environment را انتخاب […]

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

زبان برنامه نویسی دارت

دارت یک زبان برنامه نویسی نو ظهور است که توسط گوگل ارائه شده است. تا پیش از معرفی فریمورک فلاتر این زبان در بین برنامه نویسان ناشناخته بود. با معرفی فریمورک محبوب فلاتر که توسط ان میتوان یک بار کدنویسی کنید و بارها برای دستگاه های مختلف ios  ، android ، window از آن خروجی بگیرید. که به زبان دارت نوشته شده است زبان برنامه نویسی دارت نیز محبوبیت خود را بین برنامه نویسان پیدا کرد. در این مقاله قصد داریم با این زبان برنامه نویسی بیشتر آشنا شویم. مروری برزبان برنامه نویسی دارت این زبان در 10 اکتبر 2011 توسط  توسط Lars Back و KasperLund که از کارشناسان ارشد شرکت گوگل بودند ارئه شد. سال 2013 اولین نسخه رسمی این زبان منتشر شد. در آن زمان هدف از ارائه این زبان ساخت وب اپلیکیشن ها بود. پس از آن تغییرات زیادی در ساختار اصلی این زبان صورت گرفت در سال 2018 نسخه 2 این زبان ارائه شد که این نسخه با نسخه قبلی خود تغییرات زیادی از فرمت داینامیک تا استاتیک داشت. در نسخه جدید بیشتر تمرکز بر روی برنامه نویسی  cross platform یعنی یک بار کد نویسی و خروجی گرفتن برای سیستم عامل های مختلف قرار گرفت. دارت از زبان های برنامه نویسی مختلفی مثل C , C++ , C# , java , Javascript , Kotlin , Ruby […]

مطالعه :

آموزش طراحی سایت در فتوشاپ

برای آموزش طراحی سایت در فتوشاپ باید سرعت طراحی سایتتان در فتوشاپ بالا باشد در این آموزش طراحی سایت با فتوشاپ photoshop به شما کلید های سریع طراحی سایت در فتوشاپ را آموزش میدهیم.  ترفند شماره 1: چگونه یک قسمت از یک سند را که از چند لایه تشکیل شده کپی کنیم وقتی منطقه ای از یک سند را انتخاب کنید و برای انجام عمل کپی کلیدهای Ctrl+C را می فشارید آن منطقه تنها از لایه انتخابی کپی می شود. اما اگر شما بخواهید از تمام اجزای لایه ها در آن قسمت در یک لایه جدید کپی داشته باشید می توانید با افزودن کلید Shift به کلیدهای Ctrl+C این کار را انجام دهید. ترفند شماره 2: اسناد خود را در کنار هم مشاهده کنید در ابتدای تاریخ فتوشاپ (زمان زندگی دایناسورها!) وقتی تعدادی سند را باز می کنید فتوشاپ آنها را به صورت جلوی هم نمایش می دهد. یعنی تصاویر یکی پس از دیگری در جلوی هم باز می شوند که این روش Cascading نام دارد. اما اگر بخواهید به طور مثال 4 تصویر باز شده خود را کنار هم قرار دهید کافیست از منوی Windows منوی Documents را باز کرده و گزینه Tile را انتخاب کنید.     ترفند شماره 3:حالت ارائه طرح به مشتری در فتوشاپ زمان آن فرا رسیده که طرح نهایی خود را به مشتری نشان […]

مقایسه ی نود جی اس و جنگو
مطالعه :

مقایسه ی نود جی اس و جنگو

امروزه داشتن یک وب سایت و برنامه های کاربردی مربوط به آن به بخشی ضروری برای هر کسب و کاری تبدیل شده است.و هر کسی به دنبال بهترین فریمورک برای ساخت وب سایت خود می گردد. مقایسه ی نود جی اس و جنگو امری طبیعی درهنگام توسعه ی یک وب سایت می باشد. در این مقاله مقایسه ای دقیق از نود جی اس و جنگو به شما ارائه خواهیم داد. متوجه می شوید که تفاوت های این دو در چیست و چگونه می توانید از لوپ مقایسه ی آن ها نجات پیدا کنید!! وقتی نوبت به توسعه اپلیکیشن وب می‌رسد، برای تقویت برنامه وب خود به یک برنامه قوی نیاز دارید. Node.js و Django دو فریمورک منبع باز هستند که به دلیل عملکرد همه جانبه آن ها ، بسیار مورد بحث قرار گرفته اند. Node.js vs Django نود جی اس یک محیط بین پلتفرمی دارد که برای ساخت اپلیکیشن های کارآمد و سریع مورد استفاده قرار می گیرد. اساس آن جاوا اسکریپت است و می تواند هم در سمت سرور و هم در سمت مشتری اجرا شود. دلیل محبوبیت Node.js این است که ، ابزاری آسان برای اجرای جاوا اسکریپت خارج از مرورگر می باشد. از طرفی جنگو یک فریمورک سطح بالا و بین پلتفرمی پایتون است. این برنامه بر روی توسعه ی سریع برنامه ها و حذف کارهای تکراری […]

دیدگاه ها

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

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

مشخصات
دسته بندی مطلب ,
مدت زمان مطالعه
اشتراک گذاری در شبکه های اجتماعی
کلمات کلیدی