| |
 6.5 Кб |
|
| | Решил закруглить элементы форм и текстовых блоков на странице своего сайта. Принцип моего закругления - убирание по 1 пикселю в углах форм. Полностью кроссбраузерный вариант, может кому пригодиться. Хотелось бы еще как-то улучшить скрипт, сделать его еще проще и красивее, может кто внесет свою лепту?
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<style type="text/css">
.outer {width:100px; border-top:1px solid #DDDDDD; border-bottom:1px solid #666666; display:inline-table;}
.inner {background:#EEEEEE; width:100px; margin-right:-1px; margin-left:-1px;position:relative; border:none; border-left:1px solid #DDDDDD; border-right:1px solid #666666; text-align:center}
.inner input{border:none; margin:0; padding:0px 5px; width:100px; background-color:#FFFFFF;}
.inner input:hover{background-color:#FFFFCC;}
.outer:hover{border-top:1px solid #666666; border-bottom:1px solid #DDDDDD;}
.inner:hover{border-left:1px solid #666666; border-right:1px solid #DDDDDD;}
</style>
</head>
<body>
<div class="outer" style="width:200px">
<div class="inner" style="padding-left:10px;width:190px; text-align:left">Текстовый блок</div></div>
<br /><br />
<form action="#">
<div class="outer" style="width:200px"><div style="width:200px" class="inner"><input type="text" value="Поле для ввода текста" style="width:190px;"/></div></div>
<br /><br />
<div class="outer" style="width:200px"><div style="width:200px" class="inner"><input type="submit" value="Кнопка" style=" padding:1px; width:100%"/></div></div>
</form>
</body>
</html>
|
| |
| |
|
|
| |
|
|
| |
для: Yustys
(21.01.2010 в 00:02)
| | | .outer:hover
display:inline-table;
порадовало)
а если захочу большую закруглённость?:) | |
| |
|
|
| |
|
|
| |
для: sl1p
(21.01.2010 в 03:41)
| | | Если большую закругленность есть несколько вариантов - но они уже не такие элементарные, один из них закруглить уголки изображением (кружок) - четверть этого кружка и будет играть роль уголка формы - могу выложить скрипт - довольно маленький и семантически верный... Вариант 2 - сделать закругления дивами - способ тоже вполне - но излишний код в виде блоков не самый лучший вариант. Вариант 3 - скрыть форму и подлаживать под нее изображение закругленных элементов формы, т.е. нарисованную форму... это самый распространенный вариант.. но у него тоже довольно много минусов....
Коллеги, если кто знает как максимально просто и изящно закруглить поля форм - выкладывайте!!! | |
| |
|
|
| |
|
|
| |
для: Yustys
(22.01.2010 в 17:47)
| | | я имел ввиду ваш скрипт) | |
| |
|
|
| |
|
|
| |
для: sl1p
(22.01.2010 в 18:06)
| | | Я поэкспериментирую, может удастся скурглить более красиво, выложу если что) | |
| |
|
|
| |
|
|
| |
для: Yustys
(22.01.2010 в 20:38)
| | | никакого скругления не наблюдаю. убран один пиксель в углу. скруглением это можно назвать с очень большой натяжкой. а если не видно разницы, зачем париться? | |
| |
|
|
| |
|
|
| |
для: Yustys
(22.01.2010 в 20:38)
| | |
<style type="text/css">
<!--
.b1,.b2,.b3,.b4,.b5,.b6,.hh,.hf{ display: block; overflow: hidden; }
.b2,.b3,.b4,.b5{border-style: solid;border-color:#DDD;background: #FFF;}
.b1,.b2,.b3{height: 1px;}
.b3,.b4,.b5{border-width: 0pt 1px;}
.b1{margin: 0pt 5px; background: #DDD;}
.b2{border-width: 0pt 2px; margin: 0pt 3px;}
.b3{margin: 0pt 2px;}
.b4{margin: 0pt 1px;height: 2px;}
.b6{font-size: 1px;}
.hh{height: 7px;}
.hf{height: 4px;}
-->
</style>
</head>
<body>
<div style="margin: 11px; width: 400px">
<b class="b6"><b class="b1"> </b><b class="b2"> </b><b class="b3"> </b><b class="b4"> </b></b>
<div class="b5"><b class="hh"> </b>
Это блок с закруглёнными углами <br/>
Валидный
<b class="hf"> </b></div>
<b class="b6"><b class="b4"> </b><b class="b3"> </b><b class="b2"> </b><b class="b1"> </b></b>
</div>
|
| |
| |
|
|
| |
|
|
| |
для: oliss
(23.01.2010 в 19:48)
| | | Oliss, я пользовался скриптом, наподобие Вашего - но мой проект использует множество закругленных блоков - поэтому мне это не подходит, слишком много получается пустых блоков, несмотря на валидность семантика страдает...
Сегодня доделаю довольно симпатичный скриптик скругления, минимум блоков, кроссбраузерность... если интересно - выложу) | |
| |
|
|
| |
|
|
| |
для: Yustys
(23.01.2010 в 20:03)
| | | Выкладывай ;) | |
| |
|
|
| |
|
|
| |
для: Ninjak
(28.01.2010 в 14:54)
| | | Там использую 2 картинки - могу на мыло переслать... | |
| |
|
|
| |
|
|
| |
для: Yustys
(28.01.2010 в 18:07)
| | | жлобимсо?) | |
| |
|
|
| |
|
|
| |
для: sl1p
(28.01.2010 в 18:48)
| | | Нет, тута просто использую 2 картинки.... надо будет упаковать и переслать... чистым кодом необойдесси.... | |
| |
|
|
| |
|
|
| |
для: Yustys
(30.01.2010 в 18:58)
| | | Пару дней... упакую все красиво и выложу сюда! | |
| |
|
|
