×
Tìm kiếm trên diễn đàn |
|
|
Tham gia : 07/09/2018 thacmacwebre@gmail.com Website : thacmacwebre@gmail.com Gửi vào lúc : 04/03/2013 Dear all, Các pro có code gì hay thì chia sẽ cho anh em, giúp web càng đẹp hơn |
|
Gửi vào lúc : 12/03/2013 Bạn nhiệt tình tạo Topic mà sao không đưa ra code gì để mọi người tham khảo vậy, thôi để mìnhlink và topic mình cho đỡ buồn nha. http://webmienphi.vn/diendan/xemtopic/2685/vuishopping-chia-se-mot-so-code.html |
|
Gửi vào lúc : 12/03/2013 bạn có thể tham khảo 1 số code hay ở đây http://giaypatinvn.com/xemdiendan/58/T%E1%BB%95ng-H%E1%BB%A3p-Code-hay-Cho-Web.html |
|
Gửi vào lúc : 12/03/2013 |
|
Gửi vào lúc : 13/03/2013 CSS3 Dropdown Menu ( tải hình file Gradient )Dán vào Head <ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">My Projects</a>
<ul>
<li><a href="#">N.Design Studio</a>
<ul>
<li><a href="#">Portfolio</a></li>
<li><a href="#">WordPress Themes</a></li>
<li><a href="#">Wallpapers</a></li>
<li><a href="#"</a></li>
</ul>
</li>
<li><a href="#">Web Designer Wall</a>
<ul>
<li><a href="#">Design Job Wall</a></li>
</ul>
</li>
<li><a href="#">IconDock</a></li>
<li><a href="#">Best Web Gallery</a></li>
</ul>
</li>
<li><a href="#">Multi-Levels</a>
<ul>
<li><a href="#">Team</a>
<ul>
<li><a href="#">Sub-Level Item</a></li>
<li><a href="#">Sub-Level Item</a>
<ul>
<li><a href="#">Sub-Level Item</a></li>
<li><a href="#">Sub-Level Item</a></li>
<li><a href="#">Sub-Level Item</a></li>
</ul>
</li>
<li><a href="#">Sub-Level Item</a></li>
</ul>
</li>
<li><a href="#">Sales</a></li>
<li><a href="#">Another Link</a></li>
<li><a href="#">Department</a>
<ul>
<li><a href="#">Sub-Level Item</a></li>
<li><a href="#">Sub-Level Item</a></li>
<li><a href="#">Sub-Level Item</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
Dán vào CSS
body {
background: none repeat scroll 0 0 #EBEBEB;
color: #666666;
font: 0.8em/1.5em Arial,Helvetica,sans-serif;
margin: 100px auto;
width: 900px;
}
a {
color: #333333;
}
#nav {
background: url("img/gradient.png") repeat-x scroll 0 -110px #7D7D7D;
border-radius: 2em 2em 2em 2em;
line-height: 100%;
margin: 0;
padding: 7px 6px 0;
}
#nav li {
float: left;
list-style: none outside none;
margin: 0 5px;
padding: 0 0 8px;
position: relative;
}
#nav a {
color: #E7E5E5;
display: block;
font-weight: bold;
margin: 0;
padding: 8px 20px;
text-decoration: none;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
#nav a:hover {
background: none repeat scroll 0 0 #000000;
color: #FFFFFF;
}
#nav .current a, #nav li:hover > a {
background: url("img/gradient.png") repeat-x scroll 0 -40px #666666;
border-top: 1px solid #F8F8F8;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
color: #444444;
text-shadow: 0 1px 0 #FFFFFF;
}
#nav ul li:hover a, #nav li:hover li a {
background: none repeat scroll 0 0 transparent;
border: medium none;
color: #666666;
}
#nav ul a:hover {
background: url("img/gradient.png") repeat-x scroll 0 -100px #0078FF !important;
color: #FFFFFF !important;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
#nav li:hover > ul {
display: block;
}
#nav ul {
background: url("img/gradient.png") repeat-x scroll 0 0 #DDDDDD;
border: 1px solid #B4B4B4;
border-radius: 10px 10px 10px 10px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
display: none;
left: 0;
margin: 0;
padding: 0;
position: absolute;
top: 35px;
width: 185px;
}
#nav ul li {
float: none;
margin: 0;
padding: 0;
}
#nav ul a {
font-weight: normal;
text-shadow: 0 1px 0 #FFFFFF;
}
#nav ul ul {
left: 181px;
top: -3px;
}
#nav ul li:first-child > a {
}
#nav ul li:last-child > a {
}
#nav:after {
clear: both;
content: ".";
display: block;
height: 0;
line-height: 0;
visibility: hidden;
}
#nav {
display: inline-block;
}
html[xmlns] #nav {
display: block;
}
* html #nav {
height: 1%;
}
|
|
Gửi vào lúc : 13/03/2013 Tạo hiệu ứng tooltips bằng CSSCode chèn Html ( các bạn tùy chỉnh lại nhá) <div>
This is <span>tooltip#1<i>Tooltip number one</i></span>. Which can be in <span>red<i>Tooltip#1 - red color</i></span>, <span>green<i>Tooltip#1 - green color</i></span> and <span>blue<i>Tooltip#1 - blue color</i></span>.
<hr />
This is <span>tooltip#2<i>Tooltip number two</i></span>. Which can be in <span>red<i>Tooltip#2 - red color</i></span>, <span>green<i>Tooltip#2 - green color</i></span> and <span>blue<i>Tooltip#2 - blue color</i></span>.
<hr />
This is <span>tooltip#3<i>Tooltip number three</i></span>. Which can be in <span>red<i>Tooltip#3 - red color</i></span>, <span>green<i>Tooltip#3 - green color</i></span> and <span>blue<i>Tooltip#3 - blue color</i></span>.
<hr />
This is <span>tooltip#4<i>Tooltip number four</i></span>. Which can be in <span>red<i>Tooltip#4 - red color</i></span>, <span>green<i>Tooltip#4 - green color</i></span> and <span>blue<i>Tooltip#4 - blue color</i></span>.
<hr />
<span>
<img src="Link ảnh 1" />
<i><img src="Link ảnh 1" /></i>
</span>
<span>
<img src="Link ảnh 2" />
<i><img src="Link ảnh 2" /></i>
</span>
<span>
<img src="Link ảnh 3" />
<i><img src="Link ảnh 3" /></i>
</span>
</div>
Code CSS
.content {
background-color:rgba(255,255,255, 0.9);
margin:50px auto;
width:800px;
}
.content span {
background:#eee;
border:1px solid #444;
cursor:pointer;
display:inline-block;
outline:none;
padding:0 5px;
position:relative;
text-decoration:none;
-webkit-border-radius:5px;
-moz-border-radius:5px;
-ms-border-radius:5px;
-o-border-radius:5px;
border-radius:5px;
}
.content span i {
visibility:hidden;
border:1px solid #444;
bottom:60px;
left:50%;
margin-left:-110px;
opacity:0;
padding:10px;
position:absolute;
width:200px;
z-index:99;
background-image:-webkit-linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.2));
background-image:-moz-linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.2));
background-image:-ms-linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.2));
background-image:-o-linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.2));
background-image:linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.2));
background-color: #eee;
-webkit-border-radius:5px;
-moz-border-radius:5px;
-ms-border-radius:5px;
-o-border-radius:5px;
border-radius:5px;
-webkit-transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
-ms-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}
.content span:hover i {
bottom:30px;
opacity:0.95;
visibility:visible;
}
.content span:hover i.v2 {
bottom:30px;
-webkit-transform:scale(1.3);
-moz-transform:scale(1.3);
-ms-transform:scale(1.3);
-o-transform:scale(1.3);
transform:scale(1.3);
}
.content span:hover i.v3 {
-webkit-transform:rotateX(360deg) scale(1.2);
-moz-transform:rotateX(360deg) scale(1.2);
-ms-transform:rotateX(360deg) scale(1.2);
-o-transform:rotateX(360deg) scale(1.2);
transform:rotateX(360deg) scale(1.2);
}
.content span i.v4 {
height:70px;
margin-left:-60px;
padding-top:40px;
text-align:center;
width:100px;
-webkit-border-radius: 50% 50% 50% 50%;
-moz-border-radius: 50% 50% 50% 50%;
-ms-border-radius: 50% 50% 50% 50%;
-o-border-radius: 50% 50% 50% 50%;
border-radius: 50% 50% 50% 50%;
}
.content span i:before,.content span i:after {
border-bottom:0;
border-left:8px solid transparent;
border-right:8px solid transparent;
border-top:8px solid #444;
bottom:-8px;
content:"";
left:50%;
margin-left:-8px;
position:absolute;
z-index:100;
}
/* custom colors */
.content span.r {
background:#f88;
}
.content span.r i {
background-color:#f44;
border:1px solid #f44;
}
.content span.r i:before, .content span.r i:after {
border-top-color:#f44;
}
.content span.g {
background:#8f8;
}
.content span.g i {
background-color:#4f4;
border:1px solid #4f4;
}
.content span.g i:before, .content span.g i:after {
border-top-color:#4f4;
}
.content span.b {
background:#88f;
}
.content span.b i {
background-color:#44f;
border:1px solid #44f;
}
.content span.b i:before, .content span.b i:after {
border-top-color:#44f;
}
/* images */
.content span img {
height:128px;
width:128px;
}
.content span.img i {
height:auto;
margin-left:-65px;
margin-top:-10px;
width:auto;
}
.content span.img i:before, .content span.img i:after {
display:none;
}
.content span:hover i img {
height:auto;
width:auto;
}
|