Loading post navigation ...
 
 

Pro page

1
Nhận xét

Tạo ngôi hình ngôi sao với CSS Border

| by Phan Dũng | views

Hãy nhấn thanks để ủng hộ tác giả

Create a Scalable Star using using CSS border
[FD's BlOg] - Đây là một thủ thuật nâng cao của lệnh border trong CSS, thủ thuật cho phép bạn tạo một hình ngôi sao dễ dang với các lệnh border và kết hợp với việc sử dụng z-index.
Xem demo trực tiếp ở đây: http://fandung.110mb.com/test/star.html

Hình ảnh minh họa

Bây giờ là code của thủ thuật:

1. Code CSS:

/*** Star styles ***/

#star{
width: 15em;
height: 14.27em;
position: relative;
/* Useful for absolute positioned elements */
}

#star span,
#star{
display: block;
}

#top{
/* Create a big triangle */
width: 0;
height: 0;
margin: auto;
border-right: 4.64em solid transparent;
border-left: 4.64em solid transparent;
border-bottom: 14.27em solid;
}

#center{
/* Add two 'points' to the triangle */
width: 5.7em;
border-right: 4.65em solid transparent;
border-left: 4.65em solid transparent;
border-top: 3.36em solid;
height: 0;
position: absolute;
top: 5.46em;
left: 0;
z-index: 100;
text-align: center;
}

#bottom{
/* Hide a small portion below the triangle */
position: absolute;
bottom: 0;
left: 2.852em;
border-right: 4.635em solid transparent;
border-left: 4.635em solid transparent;
border-bottom: 3.4em solid #fff;
width: 0;
height: 0;
}

#center span{
margin-top: -2em;
color: #000;
background-color: transparent;
font-weight: bold;
/* this is customizable for the text */
}

a#star:hover #center span{
/* hovered text color */
color: #fff;
background-color: transparent;
}

/* Hyperlink colors */
a#star{
color: #f90;
background-color: transparent;
}
a#star:hover{
color: #fc3;
background-color: transparent;
}



2. Code HTML

<a href="#" id="star">
<span id="top"></span>
<span id="center"><span>Star</span></span>
<span id="bottom"></span>
</a>


Chúc các bạn thành công.


Enter your mail address:

1

Nguyên Luật

Anh có thể dùng CSS để tạo thành khung giống thế này không???
http://3.bp.blogspot.com/-0TMQEpAqLZk/TxfhNOYCm5I/AAAAAAAAAfE/heAuWzY02Zg/s320/demo.png



☺ Các bạn có thể viết lời bình của mình cho bài viết, và tuân thủ một số quy tắc sau:
» Các bài comment phải nghiêm túc, không dung tục, không spam.
» Nội dung phải liên quan tới chủ đề bài viết.
» Có thể sử dụng thẻ trích dẫn [quote], cấu trúc thẻ như bên dưới :

[quote=AUTHOR name=fdquote]NỘI DUNG[/quote]

» Có thể sử dụng các thẻ <b>,<i>,<a>.


BlOg FD chính thức đóng comment của khách ẩn danh.

BlOg FD.

[▼/▲] More Emoticons
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Newer Posts Older Posts Home