نوشته‌های تازه

   ایجاد افکت و جلوه انفجار بمب با کدهای css

یک جلوه گرافیکی و جذاب ویژه دهه فجر انفجار نور

 

انفجار بمب »

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>تست کد</title>

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8;charset=utf-8″ />
<style type=”text/css”>
body {
background: #000;
}

#bomb {
width: 320px;
height: 240px;
position : absolute;
top : 50%;
left : 50%;
margin-top : -120px;
margin-left: -160px;
background-image: url(“http://www.findsourcecode.com/wp-content/uploads/2014/09/bomber.png”);

-webkit-animation: play 2s steps(20) infinite;
-moz-animation: play 2s steps(20) infinite;
}

@-webkit-keyframes play {
from { background-position: 0px; }
to { background-position: -6400px; }
}

@-moz-keyframes play {
from { background-position: 0px; }
to { background-position: -6400px; }
}
</style>
</head>

<body >

<div id=”bomb”></div>

</body>
</html>

کد سی اس اس

Mosleh Uddin


نويسنده admin تاريخ بهمن ۱۵, ۱۳۹۳نظرات نظرات [۰]دسته بندي آموزش, اموزش طراحي وب و css

   دانلود سه قالب ساده و سبک html

قالب های ساده خام html

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

دانلود فایل

 

 


نويسنده admin تاريخ مرداد ۶, ۱۳۹۳نظرات نظرات [۴]دسته بندي قالب هاي html

   کد گرافیگی منوی عمودی

کد منوی css عمودی پایین بازشو برای سایت/ وبلاگ

کد HTML

  • <div class=“Blue_panel_with_menu clearfix”>
  • <h2><span>Latest Menu Panel</span></h2>
  • <div class=“panel_blue_container”>
  • <ul class=“left_navigation clearfix”>
  • <li><a href=“#” class=”active” title=“Css Menu”>Css Menu</a></li>
  • <li><a href=“#” title=“Web 2.0 Menu”>Web 2.0 Menu</a></li>
  • <li><a href=“#” title=“Only Css Menu”>Only Css Menu</a></li>
  • <li><a href=“#” title=“CSS Based Menu”>CSS Based Menu</a></li>
  • <li><a href=“#” title=“DHTML Menu”>DHTML Menu</a></li>
  • </ul>
  • </div>
  • <div class=“bl”></div>
  • <div class=“br”></div>
  • </div>

کد CSS

  • <style>
  • .clearfix:after {
  • content: “.”;
  • display:block;
  • height:0;
  • font-size:0;
  • clear:both;
  • visibility:hidden;
  • }
  • .clearfix {
  • display:inline-block;
  • }
  • * html .clearfix {
  • height:1%;
  • }
  • .clearfix {
  • display:block;
  • }
  • .Blue_panel_with_menu {
  • margin:0 0 4px 0;
  • padding:0;
  • display:block;
  • position:relative;
  • width:200px;
  • }
  • .Blue_panel_with_menu h2 {
  • background:url(images/blue_panle_w_m_panel_box_h_tr.gif) no-repeat left top;
  • margin:0;
  • padding:0 0 0 30px;
  • font-size:14px;
  • color:#ffffff;
  • font-weight:normal;
  • }
  • .Blue_panel_with_menu h2 span {
  • background:url(images/blue_panle_w_m_panel_box_h_tr.gif) no-repeat right top;
  • display:block;
  • padding:8px 0 8px 0px;
  • }
  • .Blue_panel_with_menu h2:after {
  • content: &quot;.”;
  • display:block;
  • height:0;
  • clear:both;
  • visibility:hidden;
  • }
  • .Blue_panel_with_menu h2 {
  • display:inline-block;
  • }
  • * html .Blue_panel_with_menu h2 {
  • height:1%;
  • }
  • .Blue_panel_with_menu h2 {
  • display:block;
  • }
  • .Blue_panel_with_menu .panel_blue_container {
  • border:solid 1px #adadad;
  • border-width:0 1px 1px 1px;
  • padding:2px 0 0px 0;
  • }
  • .Blue_panel_with_menu .bl {
  • position:absolute;
  • display:block;
  • width:3px;
  • height:3px;
  • background:url(images/blue_panle_w_m_panel_box_bl.gif) no-repeat left top;
  • left:0;
  • bottom:0px;
  • _bottom:-1px;
  • font-size:0px;
  • }
  • .Blue_panel_with_menu .br {
  • position:absolute;
  • display:block;
  • width:3px;
  • height:3px;
  • background:url(images/blue_panle_w_m_panel_box_br.gif) no-repeat right top;
  • right:0;
  • bottom:0px;
  • _bottom:-1px;
  • font-size:0px;
  • line-height:0
  • }
  • .Blue_panel_with_menu .left_navigation {
  • margin:0;
  • padding:0 5px 20px 5px;
  • list-style:none;
  • }
  • .Blue_panel_with_menu .left_navigation li {
  • padding:8px 0;
  • background:url(images/blue_panle_w_m_left_menu_bdr_b.gif) repeat-x bottom;
  • }
  • .Blue_panel_with_menu .left_navigation li a {
  • background:url(images/blue_panle_w_m_left_menu_arrow.gif) no-repeat 10px 4px;
  • padding:0 0 0 25px;
  • text-decoration:none;
  • color:#464646;
  • display:block;
  • font-size:14px;
  • }
  • .Blue_panel_with_menu .left_navigation li a:hover {
  • text-decoration:underline;
  • color:#000;
  • background-image:url(images/blue_panle_w_m_left_menu_arrow_h.gif)
  • }
  • .Blue_panel_with_menu .left_navigation li a.active {
  • text-decoration:none;
  • color:#000;
  • background-image:url(images/blue_panle_w_m_left_menu_arrow_h.gif);
  • font-weight:bold;
  • }
  • </style>

تست شده در مرورگرهای مختلف

دانلود فایل

onlycssmenu

 


نويسنده admin تاريخ تیر ۱۱, ۱۳۹۳نظرات نظرات [۱]دسته بندي اموزش طراحي وب و css, گرافيک

   کد گرافیکی منوی دسترسی به صورت افقی

کد گرافیکی منوی افقی برای سایت / وبلاگ

 

کد HTML

  • <div class=”onlycssmenu clearfix”>
  • <ul class=”clearfix”>
  • <li class=”first”><a href=”#” class=”active” title=”Only css menu”><span>Only css Menu</span></a></li>
  • <li><a href=”#” title=”Css Menu”><span>Css Menu</span></a></li>
  • <li><a href=”#” title=”Css Menu”><span>Css Menu</span></a></li>
  • <li><a href=”#” title=”Only Css Menu”><span>Web 2.0 Menu</span></a></li>
  • <li class=”nopipe”><a href=”#” title=”Css Menu”><span>Web 2.0 Menu</span></a></li>
  • </ul>
  • </div>

کد CSS

  • <style>
  • .clearfix:after {
  • content: “.”;
  • display:block;
  • height:0;
  • font-size:0;
  • clear:both;
  • visibility:hidden;
  • }
  • .clearfix {
  • display:inline-block;
  • }
  • * html .clearfix {
  • height:1%;
  • }
  • .clearfix {
  • display:block;
  • }
  • .onlycssmenu, .onlycssmenu ul, .onlycssmenu ul li a, .onlycssmenu ul li span {
  • background-image:url(images/menu_stip.png);
  • background-repeat:no-repeat;
  • font-family:Arial, Helvetica, sans-serif;
  • font-size:12px;
  • }
  • .onlycssmenu {
  • height:41px;
  • line-height:41px;
  • background-position:-1005px 0px;
  • padding-left:10px
  • }
  • .onlycssmenu ul {
  • background-position: right -45px;
  • height:41px;
  • line-height:41px;
  • margin:0;
  • padding:0;
  • list-style:none;
  • }
  • .onlycssmenu ul li {
  • display:inline;
  • float:left;
  • padding:6px 6px 0 5px;
  • background:url(images/menu_div.png) no-repeat right 11px;
  • }
  • .onlycssmenu ul li.nopipe {
  • background:none;
  • }
  • .onlycssmenu ul li a {
  • float:left;
  • padding-left:15px;
  • color:#FFFFFF;
  • text-decoration:none;
  • }
  • .onlycssmenu ul li a span {
  • float:left;
  • padding-right:15px;
  • height:30px;
  • line-height:30px;
  • }
  • .onlycssmenu ul li a:hover, .onlycssmenu ul li a.active {
  • background-position: -1005px -90px;
  • color:#530316;
  • }
  • .onlycssmenu ul li a:hover span, .onlycssmenu ul li a.active span {
  • background-position:right bottom;
  • }
  • </style>

تست شده در مرورگرهای مختلف

 

دانلود فایل

onlycssmenu

 

 


نويسنده admin تاريخ تیر ۱۱, ۱۳۹۳نظرات نظرات [۱]دسته بندي اموزش طراحي وب و css, گرافيک

   کد سی اس اس سایه برای متن و جدولها

کد زیر را می توانید برای ایجاد سایه در متن و بلوکها در فایلcss / سند گرفیکی خود استفاده نمایید.

 

 

CSS3 Text Shadow Style

  • text-shadow: 5px 5px 5px #FF0000 ;

————————–

 

CSS3 Box Shadow Style

  • -moz-box-shadow: 5px 5px 5px 0px #FF0000 inset ;
  • -webkit-box-shadow: 5px 5px 5px 0px #FF0000 inset ;
  • box-shadow: 5px 5px 5px 0px #FF0000 inset ;

 

 

دانلود فایل

htmllion

 

CSS3 Text Shadow

CSS3 Box Shadow


نويسنده admin تاريخ تیر ۱۱, ۱۳۹۳نظرات نظرات [۱]دسته بندي آموزش, اموزش طراحي وب و css, گرافيک

   نمایش تصاویر به صورت اسلاید گالری تصاویر

کد html

<div id="css3dimageslider">
	<ul>
		<li> <img src="img/demo/css3dimg1.jpg"> </li>
		<li> <img src="img/demo/css3dimg2.jpg"> </li>
		<li> <img src="img/demo/css3dimg3.jpg"> </li>
		<li> <img src="img/demo/css3dimg4.jpg"> </li>
	</ul>
</div>
<ul id="css3dimagePager">
	<li>Image 1</li>
	<li>Image 2</li>
	<li>Image 3</li>
	<li>Image 4</li>
</ul>
<p id="css3dtransparency">بدون پس زمینه</p>

کد سی اس اس گرافیکی

<style>
#css3dimagePager, #css3dtransparency {
	text-align: center;
	position: relative;
	z-index: 11;
	padding: 0 0 10px;
	margin: 0;
}
#css3dimagePager li {
	padding-right: 2em;
	display: inline-block;
	cursor: pointer;
}
#css3dimagePager li.active, #css3dtransparency.active {
	font-weight: bold;
}
#css3dimageslider {
	-webkit-perspective: 1000;
	-moz-perspective: 1000px;
	-ms-perspective: 1000;
	perspective: 1000;
	-webkit-perspective-origin: 50% 100px;
	-moz-perspective-origin: 50% 100px;
	-ms-perspective-origin: 50% 100px;
	perspective-origin: 50% 100px;
	margin: 40px auto 20px auto;
	width: 100%;
	height: 350px;
}
#css3dimageslider ul {
	position: relative;
	margin: 0 auto;
	height: 281px;
	width: 450px;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform-origin: 50% 100px 0;
	-moz-transform-origin: 50% 100px 0;
	-ms-transform-origin: 50% 100px 0;
	transform-origin: 50% 100px 0;
	-webkit-transition: all 1.0s ease-in-out;
	-moz-transition: all 1.0s ease-in-out;
	-ms-transition: all 1.0s ease-in-out;
	transition: all 1.0s ease-in-out;
}
#css3dimageslider ul li {
	position: absolute;
	height: 281px;
	width: 450px;
	padding: 0px;
}
#css3dimageslider ul li:nth-child(1) {
	-webkit-transform: translateZ(225px);
	-moz-transform: translateZ(225px);
	-ms-transform: translateZ(225px);
	transform: translateZ(225px);
}
#css3dimageslider ul li:nth-child(2) {
	-webkit-transform: rotateY(90deg) translateZ(225px);
	-moz-transform: rotateY(90deg) translateZ(225px);
	-ms-transform: rotateY(90deg) translateZ(225px);
	transform: rotateY(90deg) translateZ(225px);
}
#css3dimageslider ul li:nth-child(3) {
	-webkit-transform: rotateY(180deg) translateZ(225px);
	-moz-transform: rotateY(180deg) translateZ(225px);
	-ms-transform: rotateY(180deg) translateZ(225px);
	transform: rotateY(180deg) translateZ(225px);
}
#css3dimageslider ul li:nth-child(4) {
	-webkit-transform: rotateY(-90deg) translateZ(225px);
	-moz-transform: rotateY(-90deg) translateZ(225px);
	-ms-transform: rotateY(-90deg) translateZ(225px);
	transform: rotateY(-90deg) translateZ(225px);
}
#css3dimageslider.transparency img {
	opacity: 0.7;
}
</style>

کد جاوا اسکریپت

<script>
$(document).ready(function() {
 	$("#css3dimagePager li").click(function(){
		var rotateY = ($(this).index() * -90);
		$("#css3dimageslider ul").css({"-webkit-transform":"rotateY("+rotateY+"deg)", "-moz-transform":"rotateY("+rotateY+"deg)", "-ms-transform":"rotateY("+rotateY+"deg)", "transform":"rotateY("+rotateY+"deg)"});
		$("#css3dimagePager li").removeClass("active");
		$(this).addClass("active");
	});
 	$("#css3dtransparency").click(function() {
		$("#css3dimageslider").toggleClass("transparency");
		$(this).toggleClass("active");
	});
 });
</script>

تست شده در مرورگرهای Chrome 12+, Safari 4.0+, Firefox 10.0+, IE 10.0+, Opera 15.0+.

دانلود فایل

htmllion


نويسنده admin تاريخ خرداد ۳, ۱۳۹۳نظرات نظرات [۱]دسته بندي اموزش طراحي وب و css, گرافيک
« صفحه بعد   صفحه قبل »

دسته‌ها

پيشنهاد!