اطلاعات و نمونه کدهایCSS3

[sky boy]

کدهای مربوطه که در زیر و ادامه ارائه شدند کاملا معتبر و از منبع پایه هستند و از اونها در استایلها میشه استفاده کرد
مطلبی که میذارم نیاز به توضیح آنچنان نداره ولی متذکر میشم که برای افراد مبتدی شاید قابل درک نباشه
پس نیاز به دانش پایه و ناچیزی از این زبان نیاز دارید که در همین بخش از انجمن میتونید تاپیک آشنایی با زبان CSS رو دنبال و در ادامه از این مطالب استفاده کنید


این کد CSS3 انیمیشن ها هستش -برای تنظیم انیمیشن تدریجی ، با استفاده از تکرار و فریم کلیدی .

.animation-container {     height: 60px;     padding: 10px;     -webkit-animation-name: movearound;     -webkit-animation-duration: 4s;     -webkit-animation-iteration-count: infinite;     -webkit-animation-direction: normal;     -webkit-animation-timing-function: ease; }  @-webkit-keyframes movearound {     from {         width: 200px;         background: #f00;         opacity: 0.5;         -webkit-transform: scale(0.5) rotate(15deg);     }     to {         width: 400px;         background: #ffffa2;         opacity: 1;         -webkit-transform: scale(1) rotate(0deg);     } }

 

[sky boy]

کد CSS3 انیمیشن-با فریم کلیدی ، تکرار و بیشتر
​

.animation-container { 	height: 60px; 	padding: 10px; 	/* Shorthand syntax */ 	-webkit-animation: movearound 4s ease 3 normal; }  @-webkit-keyframes movearound { 	0% { 		width: 200px; 		background: #f00; 		opacity: 0.5; 		-webkit-transform: scale(0.5) rotate(15deg); 	} 	30% { 		width: 300px; 		background: #f00; 		opacity: 1; 		-webkit-transform: scale(1.3) rotate(15deg); 	} 	60% { 		width: 100px; 		background: #00f; 		opacity: 0.3; 		-webkit-transform: scale(0.3) rotate(15deg); 	}			 	100% { 		width: 400px; 		background: #ffffa2; 		opacity: 0.5; 		-webkit-transform: scale(1) rotate(0deg); 	} }

 

[sky boy]

کد CSS3 برای سایز بکگراند
نکته اینکه جای view.jpg باید عکسی قرار داده بشه
​

.background-size { 	width: 100px; 	height: 100px; 	color: #fff; 	background: url(view.jpg) no-repeat; 	border: 1px solid #0080ff; 	margin-bottom: 20px; 	padding: 10px; 	 	/* Firefox */ 	-moz-background-size: 100px 50px; 	/* WebKit */ 	-webkit-background-size: 100px 50px; 	/* Opera 9.5+, later Google Chrome */ 	background-size: 100px 50px; }  .background-size-stretch { 	width: 310px; 	height: 200px; 	color: #fff; 	background: url(view.jpg) no-repeat; 	border: 1px solid #0080ff; 	margin-bottom: 20px; 	padding: 10px; 	 	/* Firefox */ 	-moz-background-size: auto 100%; 	/* WebKit */ 	-webkit-background-size: auto 100%; 	/* Opera 9.5+, later Google Chrome */ 	background-size: auto 100%; }  .background-size-cover { 	width: 200px; 	height: 400px; 	color: #fff; 	background: url(view.jpg) no-repeat; 	border: 1px solid #0080ff; 	margin-bottom: 20px; 	padding: 10px; 	 	/* Firefox */ 	-moz-background-size: cover; 	/* WebKit */ 	-webkit-background-size: cover; 	/* Opera 9.5+, later Google Chrome */ 	background-size: cover; }

 

[sky boy]

کد CSS3 background-clip and background-origin
کلیپ و موقعیت
​

.background-clip { 	width: 100px; 	height: 100px; 	color: #fff; 	background: url(view.jpg) no-repeat; 	border: 1px solid #0080ff; 	margin-bottom: 20px; 	padding: 20px; 	 	/* Firefox */ 	-moz-background-clip: content; 	-moz-background-origin: content; 	/* WebKit */ 	-webkit-background-clip: content; 	-webkit-background-origin: content; 	/* IE9, Opera 9.5+, later Google Chrome */ 	background-clip: content-box; 	background-origin: content-box; }

 

[sky boy]

کد CSS3 برای رنگ خط کناره ها border-colors

.border-colors { 	width: 100px; 	height: 100px; 	color: #fff; 	border: 10px solid #f00; 	padding: 10px; 	 	/* Firefox */ 	-moz-border-top-colors: #eee #ddd #ccc #bbb #aaa; 	-moz-border-left-colors: #111 #222 #333 #444 #555; 	-moz-border-bottom-colors: #666 #777 #888 #999; 	/* WebKit - not working */ 	-webkit-border-top-colors: #eee #ddd #ccc #bbb #aaa; 	-webkit-border-left-colors: #111 #222 #333 #444 #555; 	-webkit-border-bottom-colors: #666 #777 #888 #999; 	/* IE9, Opera 10.5+ - not working */ 	border-top-colors: #eee #ddd #ccc #bbb #aaa; 	border-left-colors: #111 #222 #333 #444 #555; 	border-bottom-colors: #666 #777 #888 #999; }

 

[sky boy]

کد CSS3 برای خط دور عکس

border-image

.border-image { 	width: 100px; 	height: 100px; 	border: 20px; 	padding: 10px; 	 	/* Firefox */ 	-moz-border-image: url(dot.png) 0 20 0 20 round round; 	/* WebKit */ 	-webkit-border-image: url(dot.png) 0 20 0 20 round round; 	/* Opera 10.5+ */ 	border-image: url(dot.png) 0 20 0 20 round round; }

 

[sky boy]

کد CSS برای شعاع دایر(لبه گرد)
border-radius

.rounded-corners { 	width: 100px; 	height: 100px; 	color: #fff; 	background: #f00; 	padding: 10px; 	 	/* Firefox */ 	-moz-border-radius: 5px;  	/* WebKit */ 	-webkit-border-radius: 5px;  	/* IE9, Opera 10.5+, dev channel releases of Google Chrome */ 	border-radius: 5px;  }

 

[sky boy]

کد CSS3 برای box-size

.box-sizing { 	width: 300px; 	height: 100px; 	border: 1px solid #0080ff; 	margin-bottom: 20px; 	padding: 10px; 	 	/* Firefox */ 	-moz-box-sizing: content-box; 	/* WebKit */ 	-webkit-box-sizing: content-box; 	/* Opera 9.5+, Google Chrome */ 	box-sizing: content-box; }  .box-sizing-border-box { 	width: 300px; 	height: 100px; 	border: 1px solid #0080ff; 	margin-bottom: 20px; 	padding: 10px; 	 	/* Firefox */ 	-moz-box-sizing: border-box; 	/* WebKit */ 	-webkit-box-sizing: border-box; 	/* Opera 9.5+, Google Chrome */ 	box-sizing: border-box; }

 

[sky boy]

کد CSS3 برای calc()
کالک () برای محاسبه یک مقدار به صورت پویا

.calc { 	width: 100px; 	height: 100px; 	border: 1px solid #f00; 	padding: 10px; 	 	/* Firefox */ 	width: -moz-calc(75% - 100px); 	/* WebKit */ 	width: -webkit-calc(75% - 100px); 	/* Opera */ 	width: -o-calc(75% - 100px); 	/* Standard */ 	width: calc(75% - 100px); }

 

[sky boy]

کد CSS3 برای سایه-drop shadow

.shadow { 	width: 100px; 	height: 100px; 	margin: 20px auto; 	padding: 5px; 	background: #ffffa2; 	 	/* For IE 5.5 - 7 */ 	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=10, Direction=135, Color='#000000'); 	/* For IE 8 */ 	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=10, Direction=135, Color='#000000')"; 	 	/* Firefox */ 	-moz-box-shadow: 3px 3px 10px #000; 	/* WebKit */ 	-webkit-box-shadow: 3px 3px 10px #000; 	/* Standard */ 	box-shadow: 3px 3px 10px #000; 	 }

 

[sky boy]

کد CSS3 Flexible Box Layout Module
انعطاف پذیری جعبه ماژول طرح ، برای ایجاد طرح بندی های پویا و انعطاف پذیر ، با معادل ارتفاع ستون ها و منبع مستقل

.flex-container { 	width: 100%; 	display: -moz-box; 	display: -webkit-box; 	display: box; 	-moz-box-orient: horizontal; 	-webkit-box-orient: horizontal; 	box-orient: horizontal; 	outline: 1px solid #f00; 	margin-bottom: 20px; }  .flex-container div { 	padding: 10px; }  .col-1 { 	color: #fff; 	background: #f00; }  .col-2 { 	color: #fff; 	background: #00f; 	height: 200px; }  .col-3 { 	background: #0f0; }   .col-1-flex { 	-moz-box-flex: 1; 	-webkit-box-flex: 1; 	box-flex: 1; }  .col-2-flex { 	-moz-box-flex: 1; 	-webkit-box-flex: 1; 	box-flex: 1; }  .col-3-flex { 	-moz-box-flex: 2; 	-webkit-box-flex: 2; 	box-flex: 2; 	 }   .flex-container-vertical { 	display: -moz-box; 	display: -webkit-box; 	display: box; 	-moz-box-orient: vertical; 	-webkit-box-orient: vertical; 	box-orient: vertical; 	outline: 1px solid #f00; 	margin-bottom: 20px; }  .row-1 { 	color: #fff; 	background: #f00; 	 }  .row-2 { 	color: #fff; 	background: #00f; 	height: 200px; 	 }  .row-3 { 	background: #0f0; 	 	 }   .flex-container-reverse { 	width: 100%; 	display: -moz-box; 	display: -webkit-box; 	display: box; 	-moz-box-orient: horizontal; 	-webkit-box-orient: horizontal; 	box-orient: horizontal; 	-moz-box-direction: reverse; 	-webkit-box-direction: reverse; 	box-direction: reverse; 	outline: 1px solid #f00; 	margin-bottom: 20px; }  .col-1-ordinal { 	-moz-box-ordinal-group: 2; 	-webkit-box-ordinal-group: 2; 	box-ordinal-group: 2; }  .col-2-ordinal { 	-moz-box-ordinal-group: 3; 	-webkit-box-ordinal-group: 3; 	box-ordinal-group: 3; }  .col-3-ordinal { 	-moz-box-ordinal-group: 1; 	-webkit-box-ordinal-group: 1; 	box-ordinal-group: 1; }  .flex-container-center { 	width: 100%; 	display: -moz-box; 	display: -webkit-box; 	-moz-box-orient: horizontal; 	-webkit-box-orient: horizontal; 	box-orient: horizontal; 	-moz-box-pack: center; 	-webkit-box-pack: center; 	box-pack: center; 	outline: 1px solid #f00; 	margin-bottom: 20px; }  .flex-container-justify { 	width: 100%; 	display: -moz-box; 	display: -webkit-box; 	display: box; 	-moz-box-orient: horizontal; 	-webkit-box-orient: horizontal; 	box-orient: horizontal; 	-moz-box-pack: justify; 	-webkit-box-pack: justify; 	box-pack: justify; 	outline: 1px solid #f00; 	margin-bottom: 20px; }

 

[sky boy]

کد CSS3 برای font-face خانواده فونت

@font-face { 	font-family: "ChantelliAntiquaRegular"; 	src: url("Chantelli_Antiqua-webfont.eot"); 	src: local("☺"), url("Chantelli_Antiqua-webfont.woff") format("woff"), url("Chantelli_Antiqua-webfont.ttf") format("truetype"), url("Chantelli_Antiqua-webfont.svg#webfontZjhIjbDc") format("svg"); 	font-weight: normal; 	font-style: normal; }  .font-face-display { 	font: 16px ChantelliAntiquaRegular, Helvetica, sans-serif; }

 

[sky boy]

کد CSS3 برای شیب در ظاهر عناصر - gradients

نمونه ای از نتیجه کار (عکس پیوست)

#gradient {	color: #fff; 	height: 100px; 	margin-bottom: 30px; 	padding: 10px; 	 	/* For WebKit (Safari, Google Chrome etc) */ 	background: -webkit-gradient(linear, left top, left bottom, from(#00f), to(#fff)); 	/* For Mozilla/Gecko (Firefox etc) */ 	background: -moz-linear-gradient(top, #00f, #fff); 	/* For Opera */ 	background: -o-linear-gradient(top, #00f, #fff); 	/* For Internet Explorer */ 	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF, endColorstr=#FFFFFFFF); } 	 #gradient-with-stop { 	color: #fff; 	height: 100px; 	margin-bottom: 30px; 	padding: 10px; 	 	/* For WebKit (Safari, Google Chrome etc) */ 	background: -webkit-gradient(linear, left top, right top, from(#00f), to(#fff), color-stop(0.7, #fff)); 	/* For Mozilla/Gecko (Firefox etc) */ 	background: -moz-linear-gradient(left top, #00f, #fff 70%); 	/* For Opera */ 	background: -o-linear-gradient(left top, #00f, #fff 70%); 	/* For Internet Explorer */ 	filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#FF0000FF, endColorStr=#FFFFFFFF, GradientType=1); }  #gradient-radial { 	color: #fff; 	width: 100px; 	height: 100px; 	padding: 10px; 	/* For WebKit (Safari, Google Chrome etc) */ 	background: -webkit-gradient(radial, 40% 40%, 0, 40% 40%, 60, from(#ffffa2), to(#00f)); 	/* For Mozilla/Gecko (Firefox etc) */ 	background: -moz-radial-gradient(40% 40%, farthest-side, #ffffa2, #00f); 	/* For Opera */ 	background: -o-radial-gradient(40% 40%, farthest-side, #ffffa2, #00f); 	/* For Internet Explorer */	/* As if... */ }

 

[sky boy]

کد CSS3 بکار گیری HSL colors

.alpha70 { 	position: relative; 	z-index: 2; 	width: 100px; 	height: 100px; 	color: #fff; 	margin-top: -30px; 	padding: 10px; 	 	/* Fallback for web browsers that doesn't support RGBa */ 	background: #f00; /* Note: set to transparent for IE */ 	/* For IE 5.5 - 7*/ 	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2FF0000,endColorstr=#B2FF0000); 	/* For IE 8*/ 	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2FF0000,endColorstr=#B2FF0000)"; 	 	/* HSLa with 0.7 opacity */ 	background: hsla(0, 100%, 50%, 0.7); }

​

 

[sky boy]

کد CSS3 نمایش رسانه ها با تشخیص عرض پنجره مرورگر وب

.media-query-elm { 	width: 300px; 	height: 200px; 	margin-bottom: 20px; 	padding: 10px; 	color: #fff; 	background: #f00; }  @media screen and (min-width: 400px) and (max-width: 1000px) { 	.media-query-elm { 		background: #00f; 	} }  @media screen and (max-width: 399px) { 	.media-query-elm { 		color: #000; 		background: #0f0; 	} }  .orientation { 	width: 300px; 	height: 200px; 	padding: 10px; 	margin-bottom: 20px; 	border: 2px solid #800040; }  .portrait, .landscape { 	display: none; }  @media screen and (orientation: portrait) { 	.portrait { 		display: inline; 	} 	.not-detected { 		display: none; 	} }  @media screen and (orientation: landscape) { 	.landscape { 		display: inline; 	} 	.not-detected { 		display: none; 	} }

 

[sky boy]

کد CSS3 خواص برای نمایش یک متن در ستون های مختلف
multi column

.multi-column { 	/* Firefox */ 	-moz-column-width: 13em; 	-moz-column-gap: 1em; 	/* WebKit */ 	-webkit-column-width: 13em; 	-webkit-column-gap: 1em; 	/* Standard */ 	column-width: 13em; 	column-gap: 1em; }

​

 

[sky boy]

کد CSS3 پس زمینه های متعددmultiple backgrounds

.multiple-backgrounds { width: 500px; height: 200px; border: 1px solid #f00; padding: 20px; /* Google Chrome, Safari, Firefox, Opera, IE9 */ background: url(dot.png) no-repeat left top, url(1.jpg) no-repeat right top, url(view.jpg) no-repeat left bottom, url(blue-dot.png) no-repeat right bottom; }

​

 

[sky boy]

کد CSS3 طرح کلی و افست outline-offset

.outline-offset { width: 100px; height: 100px; margin: 30px; padding: 10px; border: 1px solid #000; outline: 1px dotted #00f; outline-offset: 20px; }

​

 

[sky boy]

کد CSS3 برای رویدادهای اشاره گر pointer events

.overlay { position: absolute; right: 0px; top: 0; width: 40px; height: 40px; background: rgba(0, 0, 0, 0.5); } .pointer-events-none { pointer-events: none; }

​

 

[sky boy]

کد CSS3 برای کادر با قابلیت ریسایز

.resize { width: 100px; height: 50px; border: 1px solid #000; overflow: auto; /* Firefox */ -moz-resize: both; /* WebKit */ -webkit-resize: both; /* Google Chrome */ resize: both; }

​