Let people have to admire the CSS effect _ experience Exchange

Source: Internet
Author: User
Tags xmlns
Author: EoE
1. Search and search
You have to find a good effect before you can copy
such as http://www.cssplay.co.uk/
Http://www.cssbeauty.com
can always see

I accidentally passed Cssplay today.
Http://www.cssplay.co.uk/menus/magnifier2.html
It looks like fun.

Open up your topstyle and try it.
Suggest you see a fun style ~ Don't be anxious to see his css~ meaningless

2. DIY ~
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >

<title>a</title>
<style type= "Text/css" >
ul#hovershow{
List-style-type:none;
margin:50px;
Float:left;
Display:inline;
Clear:both;
}
Ul#hovershow li{
Float:left;
Display:inline;
width:64px;
height:64px;
margin:2px;
}
Ul#hovershow Li a {
display:block;width:64px;
height:64px;

}
Ul#hovershow Li a img{
border:1px #666 Solid;
width:100%;
height:100%;

}
Ul#hovershow Li a:hover{
Position:absolute;
z-index:100;
Margin: -32px 0 0-32px;

}
Ul#hovershow Li A:hover img{
width:128px;
height:128px;
BORDER:1PX Red Solid;

}

</style>

<body>
<ul id= "Hovershow" >
<li><a href= "title=" "Test" > </a></li>
<li><a href= "2#" title= "test" > </a></li>
<li><a href= "3#" title= "test" > </a></li>
<li><a href= "4#" title= "test" > </a></li>
<li><a href= "5#" title= "test" > </a></li>
<li><a href= "6#" title= "test" > </a></li>
<li><a href= "7#" title= "test" > </a></li>
</ul>


</body>
Hint: You can modify some of the code before running

I feel good when I'm done with myself ~ ~

mainly is a:hover Position:absolute; Margin Three ~
But when I did, I found out that ~ie5 's a was dead.

3. Take make short
It's time to see someone's CSS ~ ' Even though it is also IE5 a failure
#enlarge {padding:0; margin:2em auto; list-style-type:none; width:240px; height:40px;}
#enlarge li {display:block; float:left; width:40px; height:40px; position:relative;}
#enlarge Li a {display:block; width:40px; height:40px; background:transparent; overflow:hidden; position:relative;}
#enlarge li a img {width:100%; height:100%; border:0;}
#enlarge li a:hover {position:absolute; left:-20px; top:-20px; width:80px; height:80px; z-index:100;}
Hint: You can modify some of the code before running

FT ~ written more than others a definition ~ ~
His method is to use position:relative with the left top is the same with negative value to do ~

4. Extrapolate
Suddenly think of the recent Clean Car Forum ~ Post page can use this to play ~
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >

<title>a</title>
<style type= "Text/css" >

ul#hovershow2{
List-style-type:none;
margin:50px;
width:200px;
Float:left;
Display:inline;
Clear:both;
}
Ul#hovershow2 li{
Float:left;
Display:inline;
width:20px;
height:20px;
margin:2px;

}
Ul#hovershow2 Li a {
Text-decoration:none;
Display:block;
width:20px;
height:20px;
BORDER:1PX Red Solid;
Background-color:white;
line-height:20px;
font-size:12px;
Text-align:center;
}

Ul#hovershow2 Li a:hover{
Position:absolute;
width:40px;
height:40px;
line-height:40px;
font-size:32px;
z-index:100;
Margin: -10px 0 0-10px;
}

</style>

<body>

<ul id= "Hovershow2" >
<li><a href= "title=" "Test" ><span>1</span></a></li>
<li><a href= "2#" title= "test" ><span>2</span></a></li>
<li><a href= "3#" title= "test" ><span>3</span></a></li>
<li><a href= "4#" title= "test" ><span>4</span></a></li>
<li><a href= "5#" title= "test" ><span>5</span></a></li>
<li><a href= "6#" title= "test" ><span>6</span></a></li>
<li><a href= "7#" title= "test" ><span>7</span></a></li>
</ul>

</body>
Hint: You can modify some of the code before running

Okay, more fun ~ Give up IE ~
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >

<title>a</title>
<style type= "Text/css" >

ul#hovershow2{
List-style-type:none;
margin:50px;
width:200px;
Float:left;
Display:inline;
Clear:both;
}
Ul#hovershow2 li{
Float:left;
Display:inline;
width:20px;
height:20px;
margin:2px;

}
Ul#hovershow2 Li a {
Text-decoration:none;
Display:block;
width:20px;
height:20px;
BORDER:1PX Red Solid;
Background-color:white;
line-height:20px;
font-size:12px;
Text-align:center;
}

Ul#hovershow2 Li a:hover{
Position:absolute;
width:40px;
height:40px;
line-height:40px;
font-size:32px;
z-index:100;
Margin: -10px 0 0-10px;
}
Ul#hovershow2 Li:hover + li a{
Position:absolute;
width:30px;
height:30px;
line-height:30px;
font-size:24px;
z-index:99;
Margin: -5px 0 0-5px;
}

</style>

<body>

<ul id= "Hovershow2" >
<li><a href= "title=" "Test" ><span>1</span></a></li>
<li><a href= "2#" title= "test" ><span>2</span></a></li>
<li><a href= "3#" title= "test" ><span>3</span></a></li>
<li><a href= "4#" title= "test" ><span>4</span></a></li>
<li><a href= "5#" title= "test" ><span>5</span></a></li>
<li><a href= "6#" title= "test" ><span>6</span></a></li>
<li><a href= "7#" title= "test" ><span>7</span></a></li>
</ul>

</body>
Hint: You can modify some of the code before running

The effect is not very ideal
Try to change the back of a wide to just block to the left of the ~ but can not see the number ~ not good to see
and tried to use the same method.
Side with: After added the picture on the left ~ but ~ with the number on one side there is no ~ more bad ~ ~ and it is impossible to do n picture with a number of pictures ~ Expansion of bad

Maybe that's the limit of the CSS itself.
Perhaps ~ with JS can be more simple to solve ~ ""
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.