К уроку "Как создать блок со скругленными углами?"

Обсуждение материалов (глав) сайта webremeslo.ru

К уроку "Как создать блок со скругленными углами?"

Сообщение ass-ass-in » 18 авг 2012, 16:52

Алексей, приветствую!
Во-первых, хочу выразить Вам свою благодарность и почтение за проделанную работу. На мой взгляд webremeslo.ru - лучший учебник по HTML. буквально месяц назад, я не имел никакого представления о данных языках, теперь благодаря Вам почти создал свою страничку и хочу изучить javascript и php.
Есть предложение: можно добавить для наглядности к каждому уроку пару заданий типа "сделай сам" и вставить онлайн редактор кода и включить комментарии к каждому уроку, чтобы люди могли задавать вопросы прямо к уроку. Решать, естественно, Вам, мое дело - предложить=)
Во-вторых, вопрос по теме:
на своей страничке сделал блоки с округленными углами, все получилось, но после того, как прописал в css файле к "округленному" блоку :hover (дабы убрать фон при наведении курсора на блок), произошло что то странное.(при наведении на "округленный" блок между каждым из миниблоков появляется отступ (блок как бы разъезжается), фон меняется только в том блоке на который наведен курсор. причем когда курсор убираешь с блока отступ не пропадает)
перепробовал много всего
верстаю на htmlReader 2.5 (сорри за рекламу)
вот часть css
Код: Выделить всё
.rounded {width: 146px; height: 100px;}
.b1, .b2, .b3, .b4 {
background: #c0c0c0;
overflow: hidden;
left: 0px;
}
.b1 { margin: 0 4px; height: 1px; border: 0px;}
.b2 { margin: 0 2px; height: 1px; border: 0px;}
.b3 { margin: 0 1px; height: 2px; border: 0px;}
.b4 { margin: 0 0px; height: 1px; border: 0px;}
.content { height: 50px;
background: #c0c0c0;
padding: 0px}
.rounded:hover {width: 146px; height: 100px; background:;}
.b1:hover { margin: 0 4px; height: 1px; border: 0px; background:; overflow: hidden;
left: 0px;}
.b2:hover { margin: 0 2px; height: 1px; border: 0px; background:; overflow: hidden;
left: 0px;}
.b3:hover { margin: 0 1px; height: 2px; border: 0px; background:; overflow: hidden;
left: 0px;}
.b4:hover { margin: 0 0px; height: 1px; border: 0px; background:; overflow: hidden;
left: 0px;}
.content:hover { height: 50px;
background:;
border: 0px;
cursor: pointer}


так это выглядит в файле html:
Код: Выделить всё
<th>
            <div class="rounded">
<div class="b1"></div>
<div class="b2"></div>
<div class="b3"></div>
<div class="b4"></div>
<a href="ãëàâíàÿ.html"><div class="content">Ãëàâíàÿ</div></a>
<div class="b4"></div>
<div class="b3"></div>
<div class="b2"></div>
<div class="b1"></div>
             </div>
                 </th>

как видите я блок заключил в ячейку таблицы.

Подскажите, пожалуйста, как мне исправить эту штуку. Необходимо, чтобы при наведении на любой из мини блоков фон всего "округленного" блока становился прозрачным.
Надеюсь я понятно изложил суть моей проблемы.
Заранее спасибо.
ass-ass-in
 
Сообщения: 3
Зарегистрирован: 18 авг 2012, 16:20

Re: К уроку "Как создать блок со скругленными углами?"

Сообщение ass-ass-in » 18 авг 2012, 17:11

Буду пока css-спрайтами пробовать=) может проще
ass-ass-in
 
Сообщения: 3
Зарегистрирован: 18 авг 2012, 16:20

Re: К уроку "Как создать блок со скругленными углами?"

Сообщение Алексей » 18 авг 2012, 18:27

Здравствуйте.
Благодарю за тёплые слова!
Есть предложение: можно добавить для наглядности к каждому уроку пару заданий типа "сделай сам" и вставить онлайн редактор кода и включить комментарии к каждому уроку, чтобы люди могли задавать вопросы прямо к уроку. Решать, естественно, Вам, мое дело - предложить=)

Можно сделать всё что угодно только во первых не хочется уж слишком "размывать" сайт и его структуру, а во вторых кто бы этим всем занимался.. :) - но за предложение всё ровно спасибо! я стараюсь прислушиваться ко всем советам и предложениям.

Подскажите, пожалуйста, как мне исправить эту штуку. Необходимо, чтобы при наведении на любой из мини блоков фон всего "округленного" блока становился прозрачным.


Одними средствами CSS 2.1 этого никак не сделать, можно конечно решить эту проблему с помощью скрипта но это ещё больше раздует код - не слишком ли много чести для скруглённых уголков!?
Я неспроста указал версию CSS 2.1 так как с помощью CSS 3 эту задачу можно решить куда более элегантным способом!

Вот накидал быстренько:
Код: Выделить всё
<html>
<head>
<title>блок с круглыми углами</title>
<style type="text/css">
.rounded {width: 250px; background: #cc9; padding: 10px; border-radius: 5px;}
.rounded:hover {opacity: 0.5;}
}
</style>
</head>
<body>
<div class="rounded">У этого блока скруглённые углы и он полностью становится полупрозрачным если на него навести курсор</div>
</body>
</html>


В этом коде используется вошедшие в спецификацию CSS 3 свойства: border-radius - которое позволяет скруглять углы и opacity - которое задаёт прозрачность.. здесь подробно про прозрачность писал: http://forum.webremeslo.ru/viewtopic.php?f=6&t=194

Данный код будет работать во всех современных браузерах.. а те пользователи которые пользуются старыми браузерами их 3-5% .. увидят квадратные углы, но я не думаю что из за этого произойдёт что то страшное.. скорей наоборот заставит их наконец таки установить себе нормальные браузеры ;) Всё равно это лучше чем использовать скрипты.

PS: Сейчас принялся за раздел "Учебник CSS 3" http://webremeslo.ru/css3/glava0.html оставляю здесь эту ссылку потому что сетовал там про "громоздкость" кода обсуждаемого здесь урока.. пока что в этом разделе только две черновые страницы поэтому официально его ещё не объявляю.. Так вот рано или поздно напишу там главы про border-radius, opacity и другие интересные свойства и буду всем рекомендовать безбоязненно использовать их..
Аватара пользователя
Алексей
Администратор
 
Сообщения: 834
Зарегистрирован: 03 апр 2010, 09:12
Откуда: Солнечный Геленджик :)

Re: К уроку "Как создать блок со скругленными углами?"

Сообщение ass-ass-in » 18 авг 2012, 21:46

Спасибо за ответ.

По поводу моего предложения, честно говоря, идею увидел на сайте по обучению языку javascript, название не вспомню, так вот, изучаемый материал запоминается гораздо легче, когда отрабатываешь его сразу же на практике. Тут еще раз повторюсь: мое дело - предложить.

А я уже почти спрайт сфотошопил, делал с нуля, поэтому долго. Решил пока сайт без javascript (только на html css), поэтому как сайт доделаю, скину сюда ссылку, посмотрите, оцените может совет какой-нибудь дадите.
Все то, что я сейчас сделал в плане сайта целиком и полностью Ваша заслуга.

Еще раз спасибо.
ass-ass-in
 
Сообщения: 3
Зарегистрирован: 18 авг 2012, 16:20


Вернуться в Учебники

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 3

cron
Рейтинг@Mail.ru