CSS3 Properties Flashcards
(41 cards)
::selection
The ::selection CSS pseudo-element applies rules to the portion of a document that has been highlighted (e.g., selected with the mouse or another pointing device) by the user. p::selection {}
input-placeholder
Placeholder text in inputs has (in the browsers implementing it so far) a light gray color. To style it, you’ll need vendor prefix CSS properties. ::-webkit-input-placeholder { color: red; } :-moz-placeholder { /* Firefox 18- */ color: red; } ::-moz-placeholder { /* Firefox 19+ */ color: red; } :-ms-input-placeholder { color: red; }
@font-face
Allows the use of online fonts @font-face { font-family: “FontName”; src: url(‘fontfile.eot’); src: url(‘fontfile.eot?iefix’) format(‘eot’), url(‘fontfile.svg#FontName’) format(‘svg’), url(‘fontfile.ttf’) format(‘truetype’), url(‘fontfile.woff’) format(‘woff’); }
What types of web fonts can be used?
formats: eot, svg, ttf, woff
calc()
Method of allowing calculated values for length units, i.e. width: calc(100% - 3em)
background-attachment
Method of defining how a background image is attached to a scrollable element. Values include scroll (default), fixed and local. background-attachment: scroll; background-attachment: fixed; background-attachment: local; background-attachment: inherit;
background-position edge offsets
Allows CSS background images to be positioned relative to the specified edge using the 3 to 4 value syntax. For example: background-position: right 5px bottom 5px; for positioning 5px from the bottom-right corner.
box-decoration-break
Controls whether the box’s margins, borders, padding, and other decorations wrap the broken edges of the box fragments (when the box is split by a break (page/column/region/line). http://caniuse.com/#feat=css-boxdecorationbreak
counters
Method of controlling number values in generated content, using the counter-reset and counter-increment properties. counter-reset: section counter-increment: section http://caniuse.com/#feat=css-counters https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Counters
currentColor
A CSS value that will apply the existing color value to other properties like background-color, etc. https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#currentColor_keyword
CSS generated content for pseudo-elements
Method of displaying text or images before or after the given element’s contents using the ::before and ::after pseudo-elements. All browsers with support also support the attr() notation in the content property. https://docs.webplatform.org/wiki/css/generated_and_replaced_content
Gradients
Method of defining a linear or radial color gradient as a CSS image. http://css3files.com/gradient/
Outline
The CSS outline property is a shorthand property for setting one or more of the individual outline properties outline-style, outline-width and outline-color in a single declaration. In most cases the use of this shortcut is preferable and more convenient. Outlines differ from borders in the following ways: Outlines do not take up space, they are drawn above the content. Outlines may be non-rectangular. outline: 1px solid white;
repeating gradient
Method of defining a repeating linear or radial color gradient as a CSS image. #grad1 { background-image: repeating-linear-gradient(180deg,rgb(26,198,204),rgb(26,198,204) 7%, rgb(100,100,100) 10%); }
3D transforms
rotateY, rotateX, rotateZ (deg); translateY, translateX, translateZ (deg);
perspective
perspective property to set the perspective in z-space Transform: perspective (600px); Perspective: 600px;
Improved kerning pairs and ligitures
Currently non-standard method of improving kerning pairs & ligatures using text-rendering: optimizeLegibility. auto (default); optimizeSpeed; optimizeLegibility; geometricPrecision
user select:none
Prevents using from selecting text .row-of-icons { -webkit-user-select: none; /* Chrome all / Safari all */ -moz-user-select: none; /* Firefox all */ -ms-user-select: none; /* IE 10+ */ /* No support for these yet, use at own risk */ -o-user-select: none; user-select: none; }
text stroke
Method of declaring the outline (stroke) width and color for text. -webkit-text-stroke Specifies the width and color of the outline (stroke) of text. Syntax -webkit-text-stroke: width color
Appearance
.thing { -webkit-appearance: value; -moz-appearance: value; appearance: value; } The appearance property is used to display an element using a platform-native styling based on the users’ operating system’s theme. This is used for one of two reasons: To apply platform specific styling to an element that doesn’t have it by default To remove platform specific styling to an element that does have it by default For instance, inputs with a type=search in WebKit browsers by default have rounded corners and are very strict in what you can alter via CSS. If you don’t want that styling, you can remove it in one fell swoop with appearance.
Viewport units
Length units representing 1% of the viewport size for viewport width (vw), height (vh), the smaller of the two (vmin), or the larger of the two (vmax).
rem
root em units rem Type of unit similar to em, but relative only to the root element, not any parent element. Thus compounding does not occur as it does with em units.
filters
-webkit-filter: filtername (value); filter: filtername (value); Method of applying filter effects (like blur, grayscale, brightness, contrast and hue) to elements, previously only possible by using SVG. value is often a decimal, % or deg angle grayscale, sepia, hue-rotate, saturation
media queries resolution
Allows a media query to be set based on the device pixels used per CSS unit. While the standard uses min/max-resolution for this, some browsers support the older non-standard device-pixel-ratio media query. @media (-webkit-min-device-pixel-ratio: 2), /* Webkit */ (min-resolution: 192dpi) /* Everyone else */ { … } @media (-webkit-min-device-pixel-ratio: 1.5), /* Webkit */ (min-resolution: 1.5dppx) /* The Future */ … }
