Расположение непрозрачного элемента внутри прозрачного (css)

Расположение непрозрачного элемента внутри прозрачного (css) Здравствуйте. Где-то месяц назад я опубликовал статью о том, как реализовать прозрачность cредствами css, где я пообещал в следующем посте рассказать как решить проблему прозрачности, когда все дочерние элементы унаследуют прозрачность от родителя и ничего нельзя с этим сделать. Для решения данной проблемы есть два способа.

Читать полностью

Создание тянущейся шапки с логотипом (для начинающих)

Создание “резиновой” шапки с логотипом (для начинающих)

Доброго времени суток, уважаемые читатели. Вчера вечером, мне написал в аську один человек, который попросил помочь ему с шапкой сайта. Перед ним стояла задача: сделать шапку с тянущимся фоном (резиновую) и чтобы посередине был размещён какой-то логотип. Конечно же, я не мог отказать человеку в помощи и поэтому пишу данный пост с примерами реализации такой шапки.

Читать полностью

Прозрачность средствами css (для начинающих)

Прозрачность средствами css (для начинающих)

Использование полупрозрачных элементов на странице является частым приёмом в веб-дизайне на сегодняшний день. Помимо этого, полупрозрачные элементы выглядят красиво и украшают страницу, если конечно ими не перебарщивать.

Чтобы сделать полупрозрачный элемент на фоне, например, какого-либо рисунка, можно использовать PNG-прозрачность, но данный способ не подходит для Интернет, поскольку изображения PNG-24 почти не сжимаются и имеют достаточно большой вес, а не все пользователи Рунета живут в центральной части и имеют высокоскоростной доступ в сеть. Как же быть в таком случае, чтобы угодить всем? Можно сделать взять фоновый рисунок, а затем наложить на него слой в графическом редакторе, слой сделать полупрозрачным, а затем сохранить полученное изображение в формате JPEG с приемлемой степенью сжатия. Этот метод подойдёт для небольшого блока фиксированных размеров, а если у нас большой блок с контентом, который ещё и динамически изменяется, то данный метод опять отпадает из-за большого веса изображений (при условии хорошо качества) и не возможности растягивать их. В таком случае у нас один выход, как и при использовании не прозрачного фона для блоков с динамически изменяющимися параметрами – полупрозрачность через использование каскадных таблиц стилей (CSS).

С помощью CSS прозрачность делает очень просто, достаточно к стилю элемента добавить всего 3 строки.

filter:alpha(opacity=100);  /* Здесь непрозрачность указывается в процентах (указывается только числовое значение). */
-moz-opacity:1;  /* Здесь в сотых долях от единицы. 1 = 100% не прозрачный блок. 0.5 (обязательно через точку – ни каких запятых) = 50% не прозрачности т.е. полу прозрачный. */
opacity: 1; /* Аналогично предыдущей строки */

Читать полностью

Как создать эффект свечения с CSS3

Как создать эффект свечения с CSS3 Это очень простой способ добавления эффекта свечения на контент с помощью такого свойства ccs3, как «бросить тень». Данный способ займёт у вас очень малое количество времени из-за мизерного количества кода, а следовательно и практически не увеличивает вес страницы и не увеличивает время загрузки. Для него не нужны ни какие графические файлы, всё работает на «голом» css.

Читать полностью

Трюки с текстовым полем

Трюки с текстовым полем Эх, текстовые поля. Сколько всяких причуд есть у вас. Представляю вам подборку из девяти «трюков», которые могут вам пригодиться.

1. Фоновое изображения для текстового поля, которое исчезает при вводе текста.

Вы можете добавить фоновую картинку к вашему текстовому полю или любой другой элемент. Например, на изображении ниже, фоновая картинка просит пользователей быть добрыми. ;-) Фоновое изображение в текстовом поле Если вы добавите фоновую картинку, то это может «уничтожить» стандартный стиль браузера для текстового поля. По умолчанию стандартная однопиксельная рамка, вокруг текстового поля, будет заменена на толстую границу. Для того, чтобы вернуть стандартный стиль браузера, вы можете просто задать стиль границы в css.

/* css code */
textarea {
  background: url(images/benice.png) center center no-repeat; /* Данный код разрушит стандартную рамку */
  border: 1px solid #888;
}

Читать полностью