CSS примитивы

Редакция автор: stain

browser-font-supportcursortext-shadowbrowser-prifixwidth-calcmargin-padding-border

Анимация+

И просто пока кривая шпора по css.

 
/* A style rule has three parts: selector, property, and value. 
* The declaration block contains one or more declarations, separated by semicolons. 
* Each declaration includes a property name and a value, separated by a colon. */

/* Оказывается Идентификаторы не предназначены для множественного присутствия в коде страницы, 
* в отличии от классов одинаковый идентификатор не должен встречаться на странице больше чем раз. 
* Для этого существуют классы. Class selectors work in a similar way. 
* The major difference is that IDs can only be applied once per page, 
* while classes can be used as many times on a page as needed. */

/* Селекторы могут быть вложенными, можно указать родителя через пробел потомка потом еще через пробел следующего потомка, и уже ему назначить стили. */ 
#intro .first em {color: pink; background-color:gray;}


/*Работа с текстом*/
/*There are two types of font family names: 
* - font family: a specific font family (like Times New Roman or Arial) 
* - generic family: a group of font families with a similar look (like Serif or Monospace) 
* If the name of a font family is more than one word, it must be in quotation marks: "Times New Roman". */ 
p {font-family: "Courier New", Courier, monospace;}
/* Font-size may be xx-small, small, medium, large, larger, x-large and etc. 
* You can also use numerical values in pixels or ems to manipulate font size. 20px/16px=1.25em */ 
p {font-size: small;} p{font-size:20px;} p{font-size:1.25em; }
/*font-style property has three values: normal, italic, and oblique. Oblique is very similar to italic, but less supported. */ 
p {font-style: italic;}
/*font-weight controls the boldness or thickness of the text. The values can be set as normal (default size), bold, bolder, and lighter.
* font weight with a number from 100 (thin) to 900 (thick). 400 is the same as normal, and 700 is the same as bold.*/
p {font-weight: lighter;}
/*font-variant Property allows you to convert your font to all small caps. 
* The values can be set as normal, small-caps, and inherit.
* Not! every font supports CSS font-variant */
p {font-variant: small-caps;}

/*color Property Another way of defining colors is using hexadecimal values and RGB.
* Hexadecimal form is a pound sign (#) followed by at most, 6 hex values (0-F).
* RGB defines the individual values for Red, Green, and Blue.*/
h1 {color: #0000FF;} p.example {color: rgb(255,0,0);}

/*text-align property values are as follows: left, right, center, and justify. */
p {text-align: left;}
/* vertical-align property sets used values are top, middle, and bottom. also takes the following values: baseline, sub, super, % and px (or pt, cm).*/
td {vertical-align: top;} span {vertical-align: sub;}
/* Для использования вертикального выравнивания с блочными как с табличными элементами, необходимо добавлять еще другие свойства css display: inline-table/cell;
* вместе со свойством вертикального выравнивания, немного неверно описано  */
This text is aligned to the middle
.main {height: 150px; width: 400px; display: inline-table;} .paragraph {display: table-cell; vertical-align: middle;} /*text-decoration property used values are: * none - The default value, this defines a normal text * inherit - Inherits this property from its parent element * overline - Draws a horizontal line above the text * underline - Draws a horizontal line below the text * line-through - draws a horizontal line through the text (substitutes the HTML tag) * You can combine the underline, overline, or line-through values in a space-separated list to add multiple decoration lines. * value: blink. This value is valid but is deprecated and most browsers ignore it.*/ p {text-decoration: overline;} .combine {text-decoration: underline line-through overline;} /* Красная строка(отступ) text-indent property specifies how much horizontal space should be left before the beginning of the first line of the text. * Property values are length (px, pt, cm, em, etc.), %, and inherit. * Negative values are allowed. The first line will be indented to the left if the value is negative.*/ p {text-indent: 60px;} .negative {padding: 80px; text-indent: -60px;} /*text-shadow property Добавляет тень, имеет 4-ре параметра: [x,y(направления) блюр, цвет], направления тени могут быть отрицательные, * и могут измеряться в (px, cm, mm, in, pc, pt, etc). Internet Explorer 9 and earlier do not support the text-shadow property. * Через запятую можно добавить несколько теней одному объекту. */ h1 {color: blue; font-size: 30pt; text-shadow: 5px 2px 4px grey;} .twoshadow {color: blue; font-size: 30pt; text-shadow: -10px 4px 4px grey, 10px -2px 4px green;} h1 {font-size: 20pt; text-shadow: rgba(0,0,255,1) -1px -2px 0.5em;} /* rgba Задает прозрачность цвета, но видимо изза своей специфичности порядок этого параметра не имеет значения*/ /*text-transform CSS property specifies how to capitalize an element's text * capitalize Первый символ каждого слова в предложении будет заглавным. Остальные символы свой вид не меняют. * lowercase Все символы текста становятся строчными (нижний регистр). * uppercase Все символы текста становятся прописными (верхний регистр). * none Не меняет регистр символов. * inherit Наследует значение родителя. */ p {text-transform: capitalize;} /*letter-spacing property Задает расстояние между символами. Варианты параметров: normal, inherit, и в длине using measurement units like px, pt, cm, mm, etc. * длинна расстояния между символами может быть отрицательной, в этом случае символы могут наложиться друг на друга*/ p {letter-spacing: 4px;} /*word-spacing property аналогичный параметр но работает с расстоянием между словами*/ p {word-spacing: 30px;} /*white-space: normal | nowrap | pre | pre-line | pre-wrap | inherit * задает поведение пробела * normal Текст в окне браузера выводится как обычно, переносы строк устанавливаются автоматически. * nowrap Пробелы не учитываются, переносы строк в коде HTML игнорируются, весь текст отображается одной строкой; вместе с тем, * добавление тега переносит текст на новую строку. * pre Текст показывается с учетом всех пробелов и переносов, как они были добавлены разработчиком в коде HTML. * Если строка получается слишком длинной и не помещается в окне браузера, то будет добавлена горизонтальная полоса прокрутки. * pre-line В тексте пробелы не учитываются, текст автоматически переносится на следующую строку, если он не помещается в заданную область. * pre-wrap В тексте сохраняются все пробелы и переносы, однако если строка по ширине не помещается в заданную область, * то текст автоматически будет перенесен на следующую строку. * inherit Наследует значение родителя. */ p {white-space: nowrap;} /*Свойства*/ /* margins, borders, paddings, and the actual content. * properties обрабатываются в следующем порядке: top, right, bottom, and left.*/ /*border property: size style color*/ p {border: 2px solid blue;} /*разделенные свойства границ, работают только если установлен border-style*/ /*border-style: [none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset] {1,4} | inherit * None of the border properties will have any effect unless the border-style property is set.*/ /*border-width property - specifies the width of the border*/ /*border color property - of the element can be defined using a color name, RGB, or Hex values.*/ p {padding: 10px; border-style: solid; border-width: 2px; border-color: blue;} /* через запятую можно указывать несколько картинок заднего вида, а начальное позиционирование левый верхний угол блока. * To specify more than one image, just separate the URLs with commas. */ #id {background-image: url("css_logo.png");background-color: #e9e9e9;} /*background-repeat Property * repeat-x - repeat a background-image only horizontally. * repeat-y - repeat a background-image only vertically. * no-repeat - If you want the image to be shown only once. * inherit - same specified value as the property for the element's parent.*/ body {background-image: url("css_logo.png"); background-repeat: repeat-x;} /*background-attachment property sets whether a background image is fixed or scrolls with the rest of the page. * inherit, scroll, fixed */ body {background-image: url("css_logo.png"); background-repeat: no-repeat; background-attachment: fixed;} /*list-style-type property - can be set to circle, square, decimal, disc, lower-alpha, etc.*/ ul {list-style: square outside none;} /* list-style-image - specifies an image to be used as the list item marker. * list-style-position - specifies the position of the marker box (inside, outside). "list-style-position: outside" is the default value. */ ul {list-style-image: url("logo.jpg"); list-style-position: inside;} /*Таблицы*/ /*border-collapse: collapse | separate | inherit * border-spacing: значение1 [значение2] */ /*caption-side property specifies the position of a table caption. The values can be set as top or bottom. */ /*empty-cells property specifies whether or not to display borders and background on empty cells in a table. * Possible values are: show | hide */ table {border-collapse: separate; empty-cells: hide;} /*IE and Mozilla Firefox hide the empty cells borders by default.*/ /*table-layout: auto | fixed | inherit По умолчанию auto ячейки таблицы расползаются под контент*/ /*Ссылки*/ /* a:link - defines the style for normal unvisited links * a:visited - defines the style for visited links * a:active - a link becomes active once you click on it * a:hover - a link is hovered when the mouse is over it The following properties are used to control the look and feel of links: border:none - removes border from images with links outline:none - removes the dotted border on clicked lines in IE text-decoration: none - remove the underline. */ /*cursor: [url('путь к курсору'),] | [ auto | crosshair | default | e-resize | help | move | n-resize | ne-resize | nw-resize | pointer | progress | s-resize | se-resize | sw-resize | text | w-resize | wait | inherit ]*/ /*Блоки-Строки*/ span {display: block;} /* теперь span блочный */ span {display: inline-block;} /* теперь span блочно-строчный */ p {display: inline;} /*теперь p не начинается с новой строки, * нельзя So, an inline element with display:block is not allowed to have other block elements inside it.*/ h1 {display: none;} /*прячем заголовок h1, со страницы и схлопываем место*/ /* visibility property specifies whether an element is visible or hidden. The most common values are visible and hidden. */ div {visibility: hidden;} /* прячем от глаз но не из разметки страницы*/ /*position: absolute | fixed | relative | static | inherit * relative - от края родительского элемента * fixed - привязывается к точке на экране указанной свойствами left, top, right и bottom * и не меняет своего положения при прокрутке веб-страницы. * relative - положение элемента устанавливается относительно его исходного места. * static - элементы отображаются как обычно. свойства left, top, right и bottom не влияют.*/ /*Положение элемента задается свойствами left, top, right и bottom*/ p {position:static; top: 30px; right: 5px;} /*отступ сверху и справа, блок привязан к краям и никуда не уползет*/ /*Clearing the Float left or right or both none, right, left, and both */ .resetfloat {clear:both;} /*overflow property: visible (the default value), scroll, hidden, and auto. */ /*z-index Позволяет манипулировать, очередностью отрисовки, делает видимым то что должно перекрываться следующими элементами в потоке, чем меньше число тем меньше приоритет*/ .blue {z-index: 3; position: relative;} .red {z-index: 2; position: relative;} /*CSS3*/ /*gradient - linear,radial Transforms allow you to rotate, scale, move, and skew elements. border-radius - order: top-left, top-right, bottom-right, bottom-left. HSL (Hue(0-360), Saturation(0-100%), Lightnes(0-100%)) Colors rgba(red, green, blue, alpha(0-1)) word-wrap property allows long words to be broken and wrapped into the next line. It takes two values: normal and break-word. */ .circle {border-radius: 100px;} /*круг*/ /*тень - The first length for the horizontal offset will cast the shadow to the right of the box (required) - The second length is for the vertical offset that will cast the shadow to below the box (required) - The color of the shadow (optional) - The blur and spread values should be used before the color value. horizontal offset - the shadow will be to the left of the box vertical offset - the shadow will be above the box blur radius - negative values are not allowed spread radius - negative values will cause the shadow to shrink The "inset" keyword allows to draw an inner shadow in the box. To show an inset shadow, just add the inset keyword: You can simultaneously create inner and outer shadows by separating each shadow with a comma. To remove a text-shadow, set the text-shadow property to none; no shadows will be associated with that element.*/ .shadow {box-shadow: 10px 10px #888888;} .shadow-spread-blur {box-shadow: 10px 10px 5px 5px #888888;} .shadow-negative {box-shadow: -10px -10px 5px -5px #888888;} .shadow-inset {box-shadow: inset 10px 10px 5px #888888;} .shadow-double {box-shadow: inset 10px 10px 5px #888888, 10px 10px 5px #888888;} /*Градиенты*/ .ku{background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0.2) 75%, rgba(255, 255, 255, 0) 100%);} /*pseudo-classes*/ /*:first-child and :last-child ::first-line - the first line of the text in a selector ::first-letter - the first letter of the text in a selector ::selection - selects the portion of an element that is selected by a user ::before - inserts some content before an element ::after - inserts some content after an element */ p:first-child{background-color: yellow;} p::first-line {color: #589432;} /*the ::first-line pseudo element is used to style the first line of our text: */ p::before {content: url("logo.jpg"); /*Note the content keyword in the syntax.*/ /*Загрузка шрифтов*/ @font-face {font-family: Delicious; src: url('Delicious-Roman.otf');} @font-face {font-family: Delicious; font-weight: bold; src: url('Delicious-Bold.otf');} h1{font-family: Delicious, sans-serif;} /*Загрузка для ie*/ @font-face {font-family: Delicious; src: url('Delicious-Roman.ttf'); src: url('Delicious-Roman.eot?#iefix');} /*Градиенты*/ /*You can use color names, Hex values, RGB, or HSL colors to define the gradient color. In addition to percentages, you can also use px, em, and so on, to specify the color stops. If you use the same color stop position for two colors, a sharp line will be created between them. The direction of the gradient can be changed. In the example below, the first gradient starts at left, moving right; the second one runs from bottom to top. background: radial-gradient(position, shape or size, color-stops);*/ .ku{background:-moz-linear-gradient(DeepSkyBlue, Black);} .ku{background: radial-gradient(Black, DeepSkyBlue, yellow,red,Black, DeepSkyBlue, yellow,red);} .ku{background:-moz-linear-gradient(blue 20%, yellow 30%, green 85%); background:-moz-linear-gradient(left, blue, green, white);} /*Способ установки градиента углом*/ .ku{background:-moz-linear-gradient(100deg, blue, green, white); /*так гибче*/ .ku{background: -ms-linear-gradient(bottom left, blue, green, white);} /* так только 45 градусов*/ /*Повторение градиента*/ .ku{background:-moz-repeating-linear-gradient(blue, green 20px);} /*Радиальный градиент*/ .ku{background: -moz-radial-gradient(circle, green, yellow, blue);} /*default: eclipse*/ /*We specify the horizontal position of the background, and - optionally - the vertical position using either keywords (left, center right, or top, center, bottom), length values, percentage values, or some combination of these. In addition to percentages, you can use pixels or ems. */ .ku{background: -moz-radial-gradient(top left, green, yellow, blue); } .ku{background: -moz-radial-gradient(green 5%, yellow 15%, blue 60%); } .ku{background: url("css_logo.png") no-repeat 50% 50%;} /*процентами тут задается позиция фона относительно блока*/ /*background-size: [ <значение> | <проценты> | auto ]{1,2} | cover | contain */ .ku{background-size: 100px 100px;} /*размер фона*/ /*background-clip border-box - (default) the background is painted to the outside edge of the border padding-box - the background is painted to the outside edge of the padding content-box - the background is painted within the content box - только контент без паддингов*/ .ku{background-clip: padding-box;} /*фон закрашивает и внутренние отступы*/ div {background-image: url("css-logo.png"); background-clip: content-box;} /*Прозрачные границы*/ .ku{border: 20px solid rgba(0, 0, 0, 0.3);} .ku{-moz-background-clip: padding-box; background-clip: padding-box;} /*Позиционирование нескольких слоев фона*/ div {width: 400px; height: 300px; background-image: url(csslogo.png), url(csscode.jpg);} /*кто над кем определяет порядок? первый сверху*/ .ku{background-position: right bottom, left top;} /*запятые вот что влияет на результат размещения*/ .ku{background-repeat: no-repeat; } /*короткий вариант*/ .ku{background: url(csslogo.png) right top no-repeat, url(csscode.jpg) left top no-repeat;} /*Прозрачность*/ .ku{opacity: 0.5;} /*от 0.0 до 1*/ .ku{filter: alpha(opacity=50);} /* от 0 до 100 Не стандарт CSS, а проделки microsoft для ie8 */ /*CSS3 Transitions transition-property - specifies the property to be transitioned transition-duration - specifies the duration over which transitions should occur transition-timing-function - specifies how the pace of the transition changes over its duration transition-delay - specifies a delay (in seconds) for the transition effect In the example below, we set the transition property to transform, with a duration of 5 seconds, and with an ease-in timing function that specifies a transition effect with a slow start. */ .ku{transition: transform 5s ease-in;} /*Убегающая правая граница*/ div {width: 50px; height: 50px; background: #32CD32; transition: width 3s; -webkit-transition: width 3s;} div:hover {width: 250px;} /*transition-timing-function ease - the animation starts slowly, then accelerates quickly. ease-in - starts slowly, then accelerates, and stops abruptly. ease-out - starts quickly, but decelerates to a stop. ease-in-out - similar to ease, but with more subtle acceleration and deceleration. linear - constant speed throughout the animation; often best for color or opacity changes. Finally, we have cubic-bezier(), which allows you to define your own values in the cubic-bezier function. Possible values are numeric values from 0 to 1. */ .ku{transition-timing-function: cubic-bezier(0,0,1,1);} /*Поворот Negative value will result in a counter clockwise rotation*/ .ku{transform: rotate(10deg);} /* объект хватается не за центр */ /*transform-origin property allows you to change the position of transformed elements. The default value for the property is 50% 50%, * which corresponds to the center of the element. In the example below, we use the transform-origin property together with transform-rotate. * The origin of the x-axis (horizontal) is set to 25% from the left. The origin for the y-axis (vertical) is set to 75% from above. 0 0 is the same value as top left, and 100% 100% is the same value as bottom right. The transform-origin property must be used together with the transform property.*/ /*Смещение объекта*/ .ku{transform:translate(+-Xpx, +-Ypx);} /*в градусах x-axis and the y-axis by the given angles.*/ .ku{transform: skew(30deg,10deg); transform: scale(1.5,1.5);} /*Анимация @keyframes example {0% {background-color: red;} 50% {background-color: yellow;} 70% {background-color: blue;} 100% {background-color: green;}} As an alternative to using percentages, you can use from and to keywords, where: from is a starting offset of 0% to is an ending offset of 100%.*/ @keyframes colorchange {from {background-color: red;} to {background-color: green;}} /*время выполнения анимации*/ .ku{animation-duration: 1s;} /* в данном примере colorchange функция пользователя. И она должна быть и там и там иначе не запустится цикл анимации.*/ div {animation-name: colorchange; animation-duration: 5s;} @keyframes colorchange {from { width: 0px; } to { width: 100px; }} /*animation-timing-function ease - specifies an animation with a slow start, then fast, then end slowly (this is default) linear - specifies an animation with the same speed from start to end ease-in - specifies an animation with a slow start ease-out - specifies an animation with a slow end ease-in-out - specifies an animation with a slow start and end cubic-bezier(n,n,n,n) - lets you define your own values in a cubic-bezier function The animation-delay and animation-duration values can be defined in seconds (s) or milliseconds (ms).*/ /*Повторение анимации value: infinite или количество раз*/ .ku{animation-iteration-count: 5;} /*animation-direction normal - the default value, which means it plays forward from 0 % to 100%. reverse - plays the keyframe in an opposite direction from 100 % to 0% alternate - the animation first runs forward, then backward, then forward. alternate reverse - the animation first runs backward, then forward, then backward. If you use 0 or a negative number for the animation-iteration-count, the animation will never start. */ /*The order in which each property is declared in the shorthand declaration is important and cannot be altered, or the animation will not work properly.*/ div {animation-name: colorchange; animation-duration: 3s; animation-timing-function: ease-in; animation-delay: 1s; animation-iteration-count: infinite; animation-direction: reverse;} /*короткий вариант*/ div {animation: colorchange 3s ease-in 1s infinite reverse;} /*3D transform: rotateX(deg), rotateY() and rotateZ() You can switch off all transformations applied to an element using the none function: transform: none; Translation of an element is similar to relative positioning - it doesn't affect the document's flow. The translated element will keep its position in the flow and will only appear to have moved.*/ #mybox1 {transform: translateX(29px) translateY(5em) translateZ(-13px);} #mybox1 {transform: translate3d(-20px, 4em, 10px);} /*scale3d() and rotate3d()*/ /*Perspective Perspective defines how the depth of the 3D scene is rendered. Think of perspective as a distance from the viewer to the object. The greater the value, the further the distance, so the less intense the visual effect. When defining the perspective property for an element, it is the child elements that get the perspective view, not the element itself. The perspective property only affects 3D transformed elements.*/ div.empty-div {perspective: 100px;} div.green-div {transform: rotateX(45deg);}

Tagged as:

Categorized in: webdesign

Комментариев: 0

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.