Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 26.12.2016, 01:54
Профессор
Отправить личное сообщение для wadim Посмотреть профиль Найти все сообщения от wadim
 
Регистрация: 20.01.2014
Сообщений: 150

Убрать линию
Всем привет! Все прочитал в интернете об составляющих этого кода:

<style>


a.button14 {

display: inline-block;
text-shadow: 1px 1px #fff;
text-decoration: none;
padding: .3em 1em;
border: 1px solid #aaa;
border-radius: 100px;
outline: none;
background: #d6dbbf no-repeat;
background-image:
linear-gradient(to left, #aaa, #aaa),
linear-gradient(to left, #feffe8, #feffe8),
linear-gradient(#feffe8, #d6dbbf);
background-position: calc(100% - 2.7em) 0, calc(100% - 2.7em + 1px) 0, 0 0;
background-size: 1px 100%, 1px 100%, auto auto;
overflow: hidden;
}


</style>


<a href="#" class="button14">Скачать</a>


но что там линию вертикальную рисует не понял, надо убрать линию. Убрать могу, но боюсь что код не правильно поведет себя в будущем, подскажите что рисует эту линию. К сожалению не силен в ccs.
Ответить с цитированием
  #2 (permalink)  
Старый 26.12.2016, 05:58
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

background-position: calc(100% - 2.7em) 0, calc(100% - 2.7em + 1px) 0, 0 0;
Ответить с цитированием
  #3 (permalink)  
Старый 26.12.2016, 19:20
Профессор
Отправить личное сообщение для wadim Посмотреть профиль Найти все сообщения от wadim
 
Регистрация: 20.01.2014
Сообщений: 150

Это я знаю, но где написано что эта строка рисует линию? Я про эту строку читал что она другое делает.
Ответить с цитированием
  #4 (permalink)  
Старый 26.12.2016, 20:36
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Впринципе можно и так.
background-position: 50% 0, calc(50% + 1px) 0, 0;


Перед тем, как показать, где эти полоски, я хотел бы воспользоваться cокращённой записью background, по моему так наглядней получается.
background: 
	linear-gradient(#aaa, #aaa) 50% 0 / 1px 100% no-repeat,
	linear-gradient(#feffe8, #feffe8) calc(50% + 1px) 0 / 1px 100% no-repeat,
	linear-gradient(#feffe8, #d6dbbf) 0 / auto;

У серой полоски(первое из трех), обратите внимание на no-repeat, именно оно предотвращает сплошную заливку.
Почему linear-gradient(#aaa, #aaa), а не просто #aaa? Градиент относится к свойству background-image и соотвественно его можно также, как и картинку позиционировать(числа перед знаком /) и менять размеры(числа после /)
Просто #aaa залил бы весь фон. Вторая полос... Стоп! Их можно ведь объединить в одну, и градиенты это позволяют. Я думаю теперь вы сами поймёте, где полоска.
background: 
	linear-gradient(to right, #aaa 1px, #feffe8 0) 50% 0 / 2px 100% no-repeat,
	linear-gradient(#feffe8, #d6dbbf) 0 / auto;
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Убрать display none в последнем элементе SLameN Элементы интерфейса 4 14.08.2015 18:12
Помогите убрать отступ в нижней части сайта Georka Элементы интерфейса 0 25.10.2014 09:25
Помогите убрать отступ из-за стороннего iframe Georka Элементы интерфейса 0 24.10.2014 14:19
Нужно убрать картинку valeriys Общие вопросы Javascript 5 13.09.2010 13:40
Как убрать выделение в Опере у div, получившего фокус ? spa_2002 Opera, Safari и др. 5 03.09.2009 10:42