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

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

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

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

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

Ответ
 
Опции темы Поиск в этой теме
Старый 26.01.2015, 15:43   #1
sologub
Новичок
Джуниор
 
Регистрация: 07.01.2015
Сообщений: 19
По умолчанию Объединение стилей в один.

Здравствуйте форумчане!

Имеется код:

Код:
<div class="circle">
  <div class="drop">
    <div class="circle2">
      <div class="circle3"></div>
    </div>
  </div>
</div>
Код HTML:
.circle {
  background-color: #BB3A56;
  margin: 0 auto 0 auto;
  width: 110px;
  height: 110px;
  border-radius: 100%;
}

.drop{
    width: 60px;
    height: 60px;
    position: relative;
    top: 20px;
    left: 25px;
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 50%;
    border-top-left-radius: 50%;
    border: 5px;
    background-image: -webkit-gradient(
	linear,
	left top,
	left bottom,
	color-stop(0.53, rgb(255,255,255)),
	color-stop(0.52, rgb(213,228,235))
);
   -ms-transform: rotate(-225deg);
    -webkit-transform: rotate(-225deg);
    transform: rotate(-225deg);
  
}

.circle2 {
  background-color: #ffffff;
  position:relative;
   top: 16px;
    left: 13px;
  width: 30px;
  height: 30px;
  border-radius: 100%;
}

.circle3 {
  background-color: #BB3A56;
  position:relative;
  top: 3px;
  left: 4px;
  width: 22px;
  height: 22px;
  border-radius: 100%;
}
В результате получается: http://codepen.io/sologub/pen/azwKYK?editors=110

Стоит вопрос об объединении его в один стиль. Дабы была возможность указывать <div class="стиль_картинки"></div>. Возможно ли это?
Или я иду по неверному пути?
sologub вне форума Ответить с цитированием
Старый 26.01.2015, 15:48   #2
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

Все верно, возможно.
Alar, верни репу!
Naive вне форума Ответить с цитированием
Старый 26.01.2015, 16:04   #3
sologub
Новичок
Джуниор
 
Регистрация: 07.01.2015
Сообщений: 19
По умолчанию

Цитата:
Сообщение от Naive Посмотреть сообщение
Все верно, возможно.
А куда копать? Подскажите?
sologub вне форума Ответить с цитированием
Старый 28.01.2015, 16:10   #4
grominfo
Форумчанин
 
Аватар для grominfo
 
Регистрация: 30.05.2011
Сообщений: 651
По умолчанию

Цитата:
Сообщение от sologub Посмотреть сообщение
А куда копать? Подскажите?
Ну, самый просто способ, это использовать наследование селекторов

Код:
.main-div{}  /*первый див*/
.main-div div{} /*второй див*/
.main-div div div{} /*третий див*/
Но это не ваш метод, просто пример.

Второй способ, это реогранизация стилей. В таком виде, как у вас сейчас, применить указанные вами стили в один не получится. Все зависит от конкретной задачи. Если вам нужно, чтобы просто был красный круг,а в нем картинка, то достаточно просто

Код:
    
     .main-c{
        background: #BB3A56;
        margin: 0 auto 0 auto;
        width: 110px;
        height: 110px;
        border-radius: 100%;
    }
    .main-c img{
        width: 60px;
        height: 60px;
        position: relative;
        top: 20px;
        left: 25px;
    }
Код:
<div class="main-c"><img alt="" src="" /></div>
Создание, программирование и сопровождение сайтов любой сложности.
Изготовление программ на заказ.
Список услуг и портфолио на сайте www.andreygrom.ru
grominfo вне форума Ответить с цитированием
Старый 29.01.2015, 14:56   #5
sologub
Новичок
Джуниор
 
Регистрация: 07.01.2015
Сообщений: 19
По умолчанию

Спасибо grominfo за уделенное внимание.

Второй способ попадал в поле зрения - но я его отбросил по причине необходимости использования картинок, тогда как хочется "pure CSS".

Первый способ не смотрел - попробую.

Пробую :before и :after. Для простеньких картинок (где менее трех элементов) все просто. Но при количестве более трех - становиться следующий вопрос: можно ли использовать несколько :before в одном. Но это уже совсем другая тема.
sologub вне форума Ответить с цитированием
Ответ


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

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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Excel 2007 объединение стилей из одной книги в другую Blondy Microsoft Office Excel 0 03.03.2014 22:15
Объединение проектов в один Алексей_2012 Общие вопросы Delphi 3 17.06.2013 08:25
Объединение нескольких проектов в один Марк Охман Общие вопросы Delphi 8 14.08.2012 11:42
Как правильно объединить несколько одинаковых стилей CSS в один файл? -=ButCheR=- HTML и CSS 1 30.10.2010 08:21