HTML\CSSОформление текста — новые возможности

Подключение пользовательских веб-шрифтов производится с помощью CSS-правила @font-face. Можно хранить шрифты и подключать их со своего сервера или использовать

@font-face {
    font-family: "Roboto";
    src:
        local("Roboto Regular"),
        url("/assets/roboto.woff") format("woff");
}

Тени для текста создаются с помощью CSS-свойства text-shadow.

Читать далее...

HTML\CSSЛинейные градиенты linear-gradient

Линейные градиенты — это плавный переход от одного цвета к другому. Градиенты описываются внутри CSS-свойстваbackground-image. Примеры использования:

background-image: linear-gradient(to left bottom, yellow, green);
background-image: linear-gradient(-90deg, red, yellow, green);
background-image: linear-gradient(red 50%, yellow 50%, green 100%); /* колорстопы, % либо px */
background-image: linear-gradient(red 50px, yellow 50px, rgba(0, 255, 0, 0.5) 100px);
background-image: 
    linear-gradient(...),
    linear-gradient(...);
background-image: repeating-linear-gradient(red 0px, red 25px, yellow 25px, yellow 50px, green 50px, green 75px); /* повторяющийся резкий градиент */
Читать далее...

HTML\CSSРамки border и фоновое изображение

Свойство border-radius позволяет закруглять углы элементов. Свойства border-top-left-radius, border-top-right-radius,border-bottom-right-radius и border-bottom-left-radiusпозволяют закруглять отдельные углы. Можно задать разные горизонтальные и вертикальные радиусы:

border-radius: 50%;
border-radius: 10px 20px; 
border-radius: 10px 20px 30px; 
border-radius: 10px 20px 30px 40px;
border-bottom-right-radius: 10px; /* отдельный угол */
border-top-left-radius: 10px 30px; /* горизонтальные и вертикальные радиусы */
border-radius: 10px 20px 30px 40px / 5px 15px 25px 35px; /* разные радиусы у каждого угла */

border-image

Задать фоновое изображение для рамки блока можно с помощью свойств:

Читать далее...

HTML\CSSРабота с фоном background

Кроме основных свойств работы с фоном, в CSS3 есть ряд новых возможностей.

Cвойство background-size задает размеры фонового изображения. Значения:
300px auto — первый — это ширина фонового изображения, второй — высота;
contain — изображение полностью помещается в границы фона, но может не закрывать весь фон;
cover — изображение закроет всю фоновую область, но часть изображения может обрезаться;

Читать далее...

HTML\CSSIframe и безопасность

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

<iframe src="http://example.com"></iframe>

Существует механизм, который предотвращает некоторые виды атак —принцип одинакового источника (Same Origin Policy). Если размещенное содержимое, принадлежит другому домену то вступает в действие ограничение, которое запрещает «чужеродному» содержимому доступ к DOM родительского документа. Таким образом размещенная в iframe страница не сможет прочитать, например, куки или локальное данные браузера родительского домена. Но существует риск фишинга.

В HTML5 к тегу iframe добавился атрибут sandbox, который позволяет управлять рядом ограничений. По умолчанию, iframe с атрибутом sandbox добавляет следующие ограничения:

Читать далее...