Ознакомьтесь с нашей политикой обработки персональных данных
  • ↓
  • ↑
  • ⇑
 
Записи с темой: css (список заголовков)
11:33 

Цвет фона внутри cmd

❖ Мышка-программышка в стране Информатике ❖ Друг — это тот, кто тебя знает, но всё равно любит
Внутри окна оболочки командной строки cmd можно изменять цвет фона и текста. Например, сделать в стиле Norton Commander:
color 1b
color 9e
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque auctor euismod ante eu maximus. Cras accumsan.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque auctor euismod ante eu maximus. Cras accumsan.

Это может быть удобным, например, для использования в bat-файлах, чтобы окно с запущенным скриптом хоть чем-то визуально отличалось от аналогичных. Поэтому удобно прописывать смену цветов первой строкой в bat-файле. Напоминаю, что @ в начале строки bat-файла означает, что команда выполнится, но не будет печататься на экране.
@color 1b

Можно задавать одну или две 16-ричных цифры: 1) изменится цвет текста; 2) первая цифра определяет цвет фона, вторая — цвет текста. Запуск color без параметров возвращает цветовую схему к исходному виду. Подробный список цветов можно увидеть в справке:
color /?

Таблица разрешённых цветов

Кстати, окну с выполняемым bat-скриптом можно задать собственный заголовок. Но не забываем, что если хочется использовать в заголовке кириллицу, файл должен быть сохранён в кодировке OEM 866.
@title Commander Window Caption

@темы: Цвет, Мелочи под рукой, cmd, bat, HTML, Color, CSS

06:31 

Геометрические фигуры на CSS

❖ Мышка-программышка в стране Информатике ❖ Друг — это тот, кто тебя знает, но всё равно любит

Мне очень понравилась ⇑ эта статья, где рассказывается, как можно «нарисовать» всевозможные треугольники средствами одного только CSS, без участия преобразований, а всего лишь манипулируя рамками. Вроде бы простое решение, но мне в голову никогда не приходило.

Суть отрисовки проста: берем пустой блок, назначаем ему прозрачную рамку большой толщины, одну из частей рамки делаем непрозрачной, и вуаля — получаем на выходе цветной треугольник, потому что стороны в рамках CSS соприкасаются между собой под углом 45°.

Итак, пусть задан блок с классом triangle.

<div class="triangle"></div>

.triangle {
    width: 0;
    height: 0;
    border: 10px solid transparent;
}

Манипуляции с рамкой производим, добавляя свойства в CSS-определение класса triangle.

border-top-color: teal;
border-left-color: maroon;
border-bottom-color: teal;
border-right-color: maroon;
border-color: teal transparent;
border-color: transparent maroon;
border-top-color: blue;
border-left-color: blue;
border-top-color: blue;
border-right-color: blue;
border-bottom-color: blue;
border-left-color: blue;
border-bottom-color: blue;
border-right-color: blue;
border-color: purple;
border-color: purple;
border-radius: 50%;
border-color: black red;
border-color: red transparent red red;
border-radius: 50%;

@темы: Мелочи под рукой, Color, CSS, Border

10:11 

Именованные HTML-цвета

❖ Мышка-программышка в стране Информатике ❖ Друг — это тот, кто тебя знает, но всё равно любит
Источник: ⇑ W3Schools и ⇑ DevGuru
А также:
⇑ Color Picker — оттенки цвета от тёмного к светлому
⇑ Color Mixer — результат смешения двух цветов
⇑ Kuler® — генератор тем от Adobe®

Имена цветов, отпределённых в спецификациях HTML и CSS (16 основных плюс 130 дополнительных). При клике по имени цвета можно увидеть, как он выглядит в качестве фона.

Основные цвета HTML: Aqua, Black, Blue, Fuchsia, Gray, Green, Lime, Maroon, Navy, Olive, Purple, Red, Silver, Teal, White, Yellow.

Таблица отсортирована по именам цветов. Продолжение — в комментах.

Цвета от AliceBlue до SeaGreen

@темы: Цвет, Мелочи под рукой, Theme, SVG, HTML, Color, CSS

15:14 

Солнечная система: анимация без Javascript

❖ Мышка-программышка в стране Информатике ❖ Друг — это тот, кто тебя знает, но всё равно любит
Когда я вижу такое, то чувствую себя выходцем из каменного века, ибо сама пишу анимированные финтифлюшки для сайтов на jQuery :gigi: А тут не задействовано ни единой строчки кода на Javasсript, чистый CSS 3. Меня особенно умиляет, что даже Луна вокруг Земли вращается :) Кстати, хотя указано, что сие только для браузеров с ВебКитом, в Файрфоксе тоже всё крутится замечательно (во всяком случае, в версии 9.0.1 точно).

Итак, вот она — «наша Солнечная система»:



И ишшо мне тут коллеги подкинули картинку в тему:

Поддержка CSS 3 разными браузерами:
Поддержка CSS 3 разными браузерами


К сожалению, это даже не шутка, потому что в 8-м Осле вся красявость Солнечной системы выглядит именно так:


@темы: Ссылки, HTML 5, CSS 3, CSS

10:46 

CSS 3: transform

❖ Мышка-программышка в стране Информатике ❖ Друг — это тот, кто тебя знает, но всё равно любит
Я начинаю нежно любить CSS 3. А что, разве не красота?

Вертикальный текст
⇑ www.xiper.net/collect/html-and-css-tricks/typog...
⇑ htmlbook.ru/css/writing-mode — только для IE
Текст под углом
⇑ www.xiper.net/collect/html-and-css-tricks/typog...
border-radius
⇑ htmlbook.ru/css/border-radius
text-shadow
⇑ htmlbook.ru/css/text-shadow
box-shadow
⇑ htmlbook.ru/css/box-shadow

Забавно, что многие из подобных вещей прекрасно работают и под CSS 2, если пользоваться браузеро-зависимыми свойствами, например, такими как: -moz-linear-gradient для Firefox, -webkit-linear-gradient для Safari и Chrome, -o-linear-gradient для Opera.

А вот Microsoft и здесь «отличились» — придумали префикс для IE совсем недавно: -ms-linear-gradient, в старых версиях Осла нужно пользоваться фильтрами, например: filter:gradient.

@темы: Ссылки, Мелочи под рукой, HTML 5, CSS 3, CSS, Суровые будни айтишника

16:57 

JavaScript: официальная документация

❖ Мышка-программышка в стране Информатике ❖ Друг — это тот, кто тебя знает, но всё равно любит
Ням-ням, какие вкусности :) А если серьёзно, то более всеобъемлющего справочника по Javasсript, в котором было бы буквально всё-всё-всё, на русском языке я пока ещё не встречала:

WDH.suncloud.ru

Только одно «но»: справочник не нов, далеко не нов, и потому содержит некоторые устаревшие моменты. Однако на помощь приходит официальная документация от Mozilla Developer Network!

MDN Doc Center


И не забываем про интересные статьи здесь:


@темы: MDN, HTML, JavaScript, CSS, DOM, Ссылки

10:18 

CSS-справочник

❖ Мышка-программышка в стране Информатике ❖ Друг — это тот, кто тебя знает, но всё равно любит
Любимейший мой справочник и путеводитель по миру HTML и CSS — это, несомненно, htmlbook.ru Влада Мержевича, подробнейший и удобнейший. Да-да, вы не ослышались, это реклама ;-)

htmlbook.ru





Сегодня через рекламу в том же любимом справочнике вышла на ещё один подобный сайт:

xiper.net - основы и секреты front-end разработки || HTML и CSS приемы, Обучение верстке

@темы: Ссылки, Реклама, Мержевич, HTML, CSS

16:47 

Подбор цветовых схем

❖ Мышка-программышка в стране Информатике ❖ Друг — это тот, кто тебя знает, но всё равно любит
Замечательная вещь!

02.03.2004 в 18:23
Пишет Tex:

Полезность для пользователей @дневников
Онлайн-утилита, позволяющая подбирать отличные цветовые сочетания в соответсвии со всеми законами дизайна.

Очень удобна в использовании. Прекрасно подходит для подбора цветовых схем @дневников.

Пользуемся


URL записи

@темы: CSS, Мелочи под рукой

15:14 

CSS: условные комментарии

❖ Мышка-программышка в стране Информатике ❖ Друг — это тот, кто тебя знает, но всё равно любит

Не будите спящего программиста

главная