Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 14.04.2014, 15:52   #1
alextrof94
Форумчанин
 
Регистрация: 16.03.2013
Сообщений: 599
По умолчанию CSS. Уголки на блоке.

Возможно ли как то сделать такие уголки (прикрепил) на блоке при помощи чистого CSS?
В данный момент это организуется при помощи 2х изображений.
Код:
.box {
	position: relative;
	margin: 30px auto;
	padding: 10px;
	background-color: #fff;
	min-height: 50px;
	min-width: 50px;
}
.box:before {  
    position: absolute;  
    content: url("http://mysite.ru/images/box_before.png");  
    float: right;  
    left: 0;   
    top: 0;  
	display: block;
	width: 50px;
	height: 50px;
}  
.box:after {  
    position: absolute;  
    content: url("http://mysite.ru/images/box_after.png");  
    float: right;  
    bottom: 0;   
    right: 0;  
	display: block;
	width: 50px;
	height: 50px;
}
Изображения
Тип файла: png Безымянный.png (2.2 Кб, 231 просмотров)
alextrof94$gmail.com
alextrof94 вне форума Ответить с цитированием
Старый 14.04.2014, 16:14   #2
TranceSmile
Смайлик :)
Форумчанин
 
Аватар для TranceSmile
 
Регистрация: 12.12.2010
Сообщений: 445
По умолчанию

Наверное проще оставить с картинками.
Самый перспективный framework Yii (c)
TranceSmile вне форума Ответить с цитированием
Старый 14.04.2014, 16:34   #3
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

Запросто.
http://jsfiddle.net/Na1ve/uZSML/1/
текстовый блок для ресайза
Alar, верни репу!
Naive вне форума Ответить с цитированием
Старый 14.04.2014, 17:25   #4
alextrof94
Форумчанин
 
Регистрация: 16.03.2013
Сообщений: 599
По умолчанию

Цитата:
Сообщение от Naive Посмотреть сообщение
Запросто.
http://jsfiddle.net/Na1ve/uZSML/1/
текстовый блок для ресайза
Спасибо. Это помогло.
Про бордеры я не подумал. Хотя с помощью тени пытался подобное сотворить.
alextrof94$gmail.com

Последний раз редактировалось alextrof94; 15.04.2014 в 03:13.
alextrof94 вне форума Ответить с цитированием
Старый 15.04.2014, 15:26   #5
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

тенью тоже можно)
Alar, верни репу!
Naive вне форума Ответить с цитированием
Старый 18.04.2014, 01:23   #6
alextrof94
Форумчанин
 
Регистрация: 16.03.2013
Сообщений: 599
По умолчанию

Столкнулся с проблемой =/
Ссылки, которые заходят под эти блоки 50х50 не нажимаются (в том месте). Возможно это как-то избежать?
Ну, как нибудь контенту присвоить z-index 1, а бефорам-афтерам z-index 0. Возможно? Если да, то как?
alextrof94$gmail.com
alextrof94 вне форума Ответить с цитированием
Старый 19.04.2014, 19:28   #7
alextrof94
Форумчанин
 
Регистрация: 16.03.2013
Сообщений: 599
По умолчанию

Так возможно ли избежать наложения блоков before/after на контент, при этом не добавляя новых блоков (не меняя структуру сайта)?
alextrof94$gmail.com
alextrof94 вне форума Ответить с цитированием
Старый 19.04.2014, 23:17   #8
Лубышев
Участник клуба
 
Аватар для Лубышев
 
Регистрация: 23.07.2007
Сообщений: 1,054
По умолчанию

нет нельзя
Писано по д'Эльфийски
Лубышев вне форума Ответить с цитированием
Старый 27.04.2014, 07:14   #9
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

можно поставить нулевый z-index уголкам и position: relative && z-index: 1 для всех ссылок внутри.
Alar, верни репу!
Naive вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Не применяются стили CSS в динамически загружаемом блоке. alextrof94 JavaScript, Ajax 16 05.09.2013 15:20
Игра уголки на basic Stiff Фриланс 2 28.04.2011 10:49
Круглые уголки Linel HTML и CSS 0 19.08.2010 23:56
Уголки Lera Фриланс 4 16.05.2010 18:39
Позиция текста по отношению к картинке в блоке <div>, CSS FINoM HTML и CSS 3 11.06.2009 16:31