Резиновый блок с закругленными углами на div
В сегодняшнем видеоуроке по div верстке сайта я познакомлю вас, уважаемый читатель, с принципами верстки блока с закругленными углами. Причем не просто блока, а резинового блока, который может тянуться в ширину и высоту без ограничений.
На настоящий момент существует множество способов верстки блоков с закругленными углами (статья на HabraHabr с 38-ю способами). Многие из них даже очень оригинальны и изящны.
Только ко всему этому изящному многообразию у меня есть ряд претензий:
- Во-первых, сложность CSS-конструкций, в которой разобраться новичку будет очень сложно.
- Во-вторых, зачем городить огород и искать себе проблемы, когда поставленную задачу можно решить, быть может, не так изящно, но все же, решить достойно и в соответствии со стандартами.
- В-третьих, большое количество способов базируются на методе раздвижных дверей, а для этого метода необходимо загружать большое изображение. Размеры этого изображения бывает сложно предугадать. Кстати, если вы не знакомы с методом раздвижных дверей, то я рассказываю про него в статье Верстка динамической кнопки на CSS.
Мы решим поставленную задачу дубовым методом, но не лишенным некоего изящества.
И, конечно же, верстать мы будем при помощи тегов div, без применения таблиц. В процессе просмотра видеоурока вы оцените простату данного метода, по сравнению даже с табличной реализацией.
За одно с версткой вы, как и всегда, получите порцию знаний по работе с программой Photoshop.
Переходите к просмотру видеоурока.
Видеоурок на сервисе RuTube:
Первая часть видеоурока на сервисе YouTube:
Вторая часть видеоурока на сервисе YouTube:
Третья часть видеоурока на сервисе YouTube:
При желании вы можете скачать исходники верстки для тренировки.
Я думаю, что вы уже наслышаны от меня об алгоритмах сжатия видео сервисами YouTube и RuTube, из-за которых серьезно падает качество. Так вот, как обычно вы можете скачать видео в лучшем качестве с Deposit Files (21.8 МБайт *.mp4). На нем видны все мелкие детали.
Для воспроизведения видео в формате *.mp4 у вас должен быть установлен соответствующий кодек. Если воспроизведения не происходит, то скачайте, например, K-Lite_Codec_Pack_520_Full. Я его уже скачал и загрузил себе на Deposit Files. Так что желающие могут дернуть его с Депозита (11.8 МБайт).
Метки: Верстка видео допы
Похожие материалы:
Отзывов: 24 на «Резиновый блок с закругленными углами на div»
Автор: , 27.10.2009 в 20:25
Классный урок, давно хотел узнать как верстать резиновый блок дивами
Автор: , 28.10.2009 в 00:59
Рад, что смог помочь.
Автор: , 27.10.2009 в 20:37
Спасибо
Автор: , 27.10.2009 в 21:00
Автор: , 02.11.2009 в 19:59
Андрей, спасибо вам за урок.
.
В самом начале урока, когда нужно было вырезать угол, я так понимаю можно тоже было воспользоваться инструментом Crop Tool ?
PS. И еще, спасибо за ctrl+пробел (css) в dreamweaver
Автор: , 04.11.2009 в 00:34
Да, можно было применить Crop Tool. И к результату, в этом случае, Вы бы пришли быстрее. Но я привык действовать по описанному алгоритму.
Раздумываю по поводу Crop Tool… А ведь действительно удобно. Удобно, когда на слой наложены стили и при копировании куска слоя потом приходится дополнительно вклеивать стиль. Видимо при использовании Crop Tool такая необходимость отпадает.
Спасибо за комментарий. Но привычка – дело труднопереборимое.
Автор: , 03.11.2009 в 17:06
Благодарю за урок, Андрей!
Автор: , 04.11.2009 в 00:25
Рад помочь! Спасибо Вам за спасибо.
Автор: , 15.12.2009 в 02:02
Спасибо. Тема опять же заезженная, но видеоуроков по ней ещё никто не выпускал. Чёрт его знает каким методом пользоваться. Нужно перепробовать на своём коде штук 30 вначале, а потом каждый решит для себя сам
Автор: , 08.01.2010 в 18:48
Спасибо! Я как-то искал материал о верстке, и попал на ваш блог. Теперь качаю все уроки. Большое спасибо за них!
Автор: , 21.01.2010 в 20:35
Das ist Gut! Это есть хорошо!
Автор: , 21.02.2010 в 05:57
Спасибо, Андрей, классно, я гораздо сложнее добивалась эффекта с закругленными углами. Подскажите, пожалуйста, решение еще такой задачи. Внутри блока контента разместить картинку по центру( и по вертикали, и по горизонтали). Проблему вызывает то, что vertical – align работает лишь в ячейке таблицы. Но даже display: table-cell не помогло. В моем случае весь блок вместе с углами фиксированного размера, и размеры картинки по высоте и ширине не превышают допустимых размеров, размеры таковы, что даже при максимальных остаётся свободное место. Буду очень благодарна, если откликнетесь.
Автор: , 28.02.2010 в 10:08
Да, вертикальное выравнивание в блоке – это действительно проблема. Я писал об этом здесь: http://www.sdelaysite.com/kniga/verstka-kniga/vertikalnoe-vyravnivanie
Автор: , 14.03.2010 в 01:07
Жаль, что нет здесь оценок – по пятибальной системе, я бы Вам пятёрок понаставила бы:) Всё ОЧЕНЬ понятно и доступно! Спасибо, буду учиться теперь с Вами:)
Автор: , 24.03.2010 в 07:46
Андрей. Большое спасибо вам за уроки.
Я новичок в веб программировании. Ваши уроки достаточно хорошо сориентировали в целях и задачах. Отличное дополнение к личному изучению основ. Хочу поинтересоваться у вас: В дальнейшем вы планируете развивать тему верстки в div и врезке кода в CMS системы?
Столкнулся с вопросом верстки сайта из psd в полный php + css код в CMS Drupal. Очень интересно узнать как можно это делать также легко и просто, как вы это описываете.
Автор: , 26.03.2010 в 00:37
Спасибо Андрей за уроки. Очень понятно и доступно. Продолжайте также радовать нас своими уроками.
Автор: , 26.03.2010 в 19:39
Уроки не запускаются. В чем причина? Если у вас всё норм, тогда может у меня что-то?
Автор: , 27.03.2010 в 18:35
Здавствуйте, Андрей. Спасибо за урок, всё доступно и понятно. Но, как говорится, толи лыжи не едут, толи я е…й.
Дело в том, что мне нужно сделать почти такой же фокус, но оставив только верхнюю часть с заголовком, со всеми скругленными углами. То есть нужно в итоге получить полоску определенного цвета со скругл. углами, внутри которой будет текст, причем она должна тянуться в зависимости от ширины текста. Это нужно для выделения всего одной строки в конце статьи, строка может иметь разную длину, но всегда будет оставаться одной строкой, не переходя в другую.
Я пытался сделать по аналогии, но чего-то не могу понять, так как выходит, что круглые края на концах строки вижу, а внутренность прозрачная и не заполняется цветом. Помогите одолеть, буду вам очень признателен.
Автор: , 13.04.2010 в 12:18
и снова спасибо)) теперь вслух!
только оффтоп позвольте (можно не публиковать): очепятка в тексте – “И, конечно же, верстать мы будем при помощи тегов div, без применения таблиц. В процессе просмотра видеоурока вы оцените простату …” имелось в виду “оцените простОту”, ведь правда ?? потому что оценить простАту как-то совсем не хочется, особенно тем кому уже за 30 ))))))
Автор: , 18.04.2010 в 10:19
Спасибо за доступность изложения! Попробую шаблон своего сайта переделать)))
Автор: , 19.04.2010 в 11:08
Спасибки за урок, клёва , понятно всё.
Вот тока скажите, как сделать такой блок с закруглёнными краями, тока чтобы по всему перимитру была рамка например в 1 пиксель, а внутри однотонный цвет.
если конкретно, то как сделать такой же бордер внизу и вверху, как он есть слева и справа?
Автор: , 19.05.2010 в 20:46
а если фон сайта не белый или картинка не прокатит?
Автор: , 02.06.2010 в 14:05
А нет у вас в картинках этого урока с пошаговым описанием?
Автор: , 25.07.2010 в 15:22
Очень хорошее видео особенно для таки валенков как я)))) Но все равно затык у меня((( Фотошоп третий, дринвивер у меня восьмой. Вроде все как надо. Но не получается вырезать только уголок. Не копируется отдельно. Копирует только весь блок целиком! Подскажите в чем моя ошибка или это у меня клинический случай?)))
СПАСИБО за видео!!!!!!!