volshebnyi

Начните с курса "Специалиста" HTML и CSS. Уровень 1. Создание сайтов по стандартам W3C и переход на HTML 5 и СSS 3. Если владеете английским, посмотрите 30 Days to Learn HTML and CSS. Но если вообще с нуля, то лучше, конечно, со специалиста начинать... И, конечно, все строго ИМХО.

Я уже перечитывал по поводу геометрических фигур на чистом CSS. Но ничего не выходит...

А еще вот такой вопрос у меня. Есть вот слайдер афиш: <ul class="carousel"> <li> <a href="#"><img src="img/pic02.jpg" alt=""></a> <p>Текст афиши</p> </li> </ul> CSS: .carousel img{ width: 160px; height: 220px; margin-bottom: 20px; -webkit-box-shadow: 0px 1px 2px 0px #b7b7b7; -moz-box-shadow: 0px 1px 2px 0px #b7b7b7; box-shadow: 0px 1px 2px 0px #b7b7b7; } .carousel ul li { background: none; background-color: #FFF; padding: 1px; width: 160px; } Как добиться результата с такими углами над картинками, как на скриншоте? Очень много перелистал материалов по этому поводу, но так, к сожалению, и не смог решить проблему. Спасибо!

Спасибо Вам огромное!

Здравствуйте! Имеется список ссылок: HTML <ul class="roomList"> <li> <img src="img/tykvaMini.png" alt=""> <a href="#">Тыквенная</a> </li> <li> <img src="img/tykvaMini.png" alt=""> <a href="#">Тыквенная</a> </li> <li> <img src="img/tykvaMini.png" alt=""> <a href="#">Тыквенная</a> </li> <li> <img src="img/tykvaMini.png" alt=""> <a href="#">Тыквенная</a> </li> <li> <img src="img/tykvaMini.png" alt=""> <a href="#">Тыквенная</a> </li> </ul> CSS .roomList{ float: left; width: 300px; margin-right: 10px; padding-left: 10px } .roomList li{ margin-bottom: 15px; padding-left: 70px; } .roomList li img{ float: left; width: 28px; height: 25px; padding: 5px; border-radius: 100px; } .roomList li img:hover{ cursor: pointer; webkit-box-shadow:0px 1px 4px rgba(0, 0, 0, 0.5); -moz-box-shadow:0px 1px 4px rgba(0, 0, 0, 0.5); box-shadow:0px 1px 4px rgba(0, 0, 0, 0.5); } .roomMini{ display: block; height: 25px; padding-left: 48px; padding-top: 10px; font-family: Ava, Tahoma, Verdana; font-size: 15px; } .roomMini:hover{ text-decoration: underline; } Необходимо сделать так, что бы псевдокласс :hover срабатывал одновременно и для изображения (появлялась тень) и для текста ссылки (подчеркивание). Отдельно у меня это, естественно получается, а вот одновременно - никак. На изображении то, что должно получиться: Заранее благодарю за помощь и конструктивные советы!