Listeria.Ru

Продолжая тему CSS хочется посоветовать 20 актуальных статей, для того, чтобы вы научились скруглять уголки и не только =):

1. Rounded Corners
2. Rounded Corners without images
3. Creating a Netflix style star ratings
4. Tableless forms
5. Styling Lists with CSS
6. 2 Column Layout Technique
7. 3 Column Layout with CSS
8. 3 Column Fixed width centered layout
9. Printing with CSS
10. Adding a CSS stylesheet to an RSS feed
11. Footer Stick
12. CSS Element Hover Effect
13. Styling Horizontal Rules
14. Clearing Floats
15. CSS Popups
16. Box Punch
17. CSS Badge
18. Orange RSS Buttons with pure CSS
19. 10 CSS Tricks you may not know
20. 10 More CSS Tricks you may not know

Сделай Web красивым!

Как ни крути, а CSS – шутка волшебная =). Некоторые не сложные приемы верстки позволяют “облагородить” ваш сайт, сделать его намного юзабельным и приятным глазу. Об этих часто используемых приемах я и хочу вам поведать:

1. Скругленные уголки без картинок

  <div id="container">
<b class="rtop">
<b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b>
</b>
<!--content goes here -->
<b class="rbottom">
<b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b>
</b>
</div>   .rtop, .rbottom{display:block}
.rtop *, .rbottom *{display: block; height: 1px; overflow: hidden}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px; height: 2px}  

2. Стильный список

  <ol>
<li>   This is line one
</li>
<li>   Here is line two
</li>
<li>   And last line
</li>
</ol>   ol {
font: italic 1em Georgia, Times, serif;
color: #999999;
}   ol p {
font: normal .8em Arial, Helvetica, sans-serif;
color: #000000;
}  

3. Красивые формы -) без использования таблиц

  <form>
<label for="name">Name</label>
<input id="name" name="name"><br>
<label for="address">Address</label>
<input id="address" name="address"><br>
<label for="city">City</label>
<input id="city" name="city"><br>
</form>   label,input {
display: block;
width: 150px;
float: left;
margin-bottom: 10px;
}   label {
text-align: right;
width: 75px;
padding-right: 20px;
}   br {
clear: left;
}  

4. Красивое оформление цитаты

  blockquote:first-letter {
background: url(images/open-quote.gif) no-repeat left top;
padding-left: 18px;
font: italic 1.4em Georgia, "Times New Roman", Times, serif;
}  

5. Текстовые градиент

  <h1><span></span>CSS Gradient Text</h1>   h1 {
font: bold 330%/100% "Lucida Grande";
position: relative;
color: #464646;
}
h1 span {
background: url(gradient.png) repeat-x;
position: absolute;
display: block;
width: 100%;
height: 31px;
}   <!--[if lt IE 7]>
<style>
h1 span {
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gradient.png', sizingMethod='scale');
}
</style>   <![endif]-->  

6. Веритикальное центрирование с помощью line-height

  div{
height:100px;
}
div *{
margin:0;
}
div p{
line-height:100px;
}   Content here  

7. Скругленные уголки с помощью картинок

  <div class="roundcont">
<div class="roundtop">
<img src="tl.gif" alt=""
width="15" height="15" class="corner"
style="display: none" />
</div>   CONTENT
<div class="roundbottom">
<img src="bl.gif" alt=""
width="15" height="15" class="corner"
style="display: none" />
</div>
</div>   .roundcont {
width: 250px;
background-color: #f90;
color: #fff;
}   .roundcont p {
margin: 0 10px;
}   .roundtop {
background: url(tr.gif) no-repeat top right;
}   .roundbottom {
background: url(br.gif) no-repeat top right;
}   img.corner {
width: 15px;
height: 15px;
border: none;
display: block !important;
}  

8. Многоуровневое имя класса

  <img src="image.gif" class="class1 class2" alt="" />   .class1 { border:2px solid #666; }
.class2 {
padding:2px;
background:#ff0;
}  

9. Горизонтальное центрирование

  <div id="container"></div>   #container {
margin:0px auto;
}  

10. Заглавная

  <p class="introduction"> This paragraph has the class "introduction". If your browser supports the pseudo-class "first-letter", the first letter will be a drop-cap.   p.introduction:first-letter {
font-size : 300%;
font-weight : bold;
float : left;
width : 1em;
}  

11. Prevent line breaks in links, oversized content to brake

  a{
white-space:nowrap;
}   #main{
overflow:hidden;
}  

12. Показать скроллбар в firefox, удалить textarea scrollbar в IE

  html{
overflow:-moz-scrollbars-vertical;
}   textarea{
overflow:auto;
}  

Оригинал. Удачной верстки!