CSS3 Properties Flashcards
::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 */ … }
dpi vs dppx
Once upon a time, Webkit decided a media query for the screen resolution was needed. But rather than using the already-standardized resolution media query, they invented -webkit-device-pixel-ratio. The resolution media query can take “dots per inch” and “dots per centimeter”, while -webkit-device-pixel-ratio takes “dots per px”. But these are all fundamentally the same thing because 1in = 96px = 2.54cm. (Granted, not all of this was well-understood in 2006, so we can forgive Webkit for making something up.) So to unprefix -webkit-device-pixel-ratio all you have to do is convert it to resolution—which is already implemented by all the other browsers. The easiest way is to multiply the value by 96 and append dpi. But wait! you say. I don’t want to do math! Can’t the CSSWG standardize device-pixel-ratio so I don’t have to do math? We could… but then we’d have two features that do exactly the same thing. And typing device-pixel-ratio is awkard, isn’t it? So instead, we added the dppx unit to mean “dots per px”. This way, we can avoid dpi math not just in media queries, but anywhere else that takes a , too. Instead of having to add a new device-pixel-resolution query, browsers can just implement the new dppx unit (which is already in CR) for the old resolution query. Then you can just write (min-resolution: 2dppx).
Flexible boxing
Method of positioning elements in horizontal or vertical stacks. Support includes the support for the all properties prefixed with flex as well as align-content, align-items, align-self, and justify-content. display: flex; flex-flow: ; flex-wrap: ;
e. g
div. conrtainer {
height: 300px;
display: flex;
align-items: center; (flex-start, flex-end, stretch and baseline) Vetical position
justify-content: center; horizontal position
}
overflow-wrap and text-overflow
overflow-wrap: Enables words to wrap even if they are longer than their container. overflow-wrap: normal; overflow-wrap: break-word; text-overflow: Controls how text is displayed when it is longer than its containing area. -what the overflow property is set to might override what’s set here text-overflow: normal; ellipsis; clip; nowrap (only first line shows)
multiple background images
It’s possible to have multiple background images background: url(image1.png), url(image2.png), url(image3.png) What will happen is these will layer over the top of each other You can also use background: url(image1.png) right bottom, url(image2.png) center, url(image3.png)
Background clip
Sets the visible range of the background including background images. By default the background of a box (element) is drawn beneath the border, that is the border covers it (= border-box, default value). To change this behaviour it’s possible to use the values padding-box and content-box (Firefox 3.6 uses border and padding instead, content is not supported). values background-clip: border-box | content-box | padding-box;
Css pointer events
The user-select property enables authors to specify which elements in the document can be selected by the user and how. This allows for easier interactions when not all elements are equally useful to select, avoiding accidental selections of neighbouring content.
user-select: auto | none | text | element
This CSS property, when set to “none” allows elements to not receive hover/click events, instead the event will occur on anything behind it.
image set
Delivering the most appropriate image resolution for a user’s device can be a difficult task. Ideally, images should be in the same resolution as the device they’re being viewed in, which can vary between users. However, other factors can factor into the decision of which image to send; for example, if the user is on a slow mobile connection, they may prefer to receive lower-res images rather than waiting for a large proper-res image to load. The image-set() function allows an author to ignore most of these issues, simply providing multiple resolutions of an image and letting the UA decide which is most appropriate in a given situation.
This example shows how to use image-set() to provide an image in three versions: a “normal” version, a “high-res” version, and an extra-high resolution version for use in high-quality printing (as printers can have extremely high resolution):
background-image: image-set( “foo.png” 1x, “foo-2x.png” 2x, “foo-print.png” 600dpi );
resize
Method of allowing an element to be resized by the user, with options to limit to a given direction.
resize: none | both | horizontal | vertical | inherit
border-radius
Allows you to specify rounded corners. specified in units (e.g. px, em)
To target a specfic side, border-radius-side e.g border-top/bottom-left/right-radius.
Make circles by specifying border-radius: 45px on each side
text-shadow
Adds shadow to text.
text-shadow: 1px 1px 2px #FFF;
The fist specifies the horizontal offset
the 2nd specifies the vertical offset
the 3rd amount of blur
The 4th colour
box-shadow
Adds a shadow to block level elements
similar sytanx to text-shadow
box-shadow: 1px 1px 2px #FFF;
box-sizing
Informs how padding, border and content width affect elements size
box-sizing: boder-box;
The width and height properties (and min/max properties) includes content, padding and border, but not the margin
box-sizing: content-box; (default value)
opactity
opacity: 0.5
0 means transparent, 1 fully opaque
transitions
transition-property: ;
transition-delay: ;
transition-timing-function;
transition-duration.
shorthand: transition: property duration timing-function
css transforms
scale
transform: 1.5; 1 =100% 1.5 150%
skew
transform: skew 30deg;
rotate
transform: rotate 30deg;
translate
transform: 20px 50px; horizontal vertical
What’s the syntax to have two css transforms?
transform: scale(1.5) rotate(30deg);
Note: no comma in between values
Multi column layout
column-count: # of columns e.g. 3;
column-gap: gap between columns e.g. 30px; no on either side
column-rule: border syntax e.g. 1px solid #ddd;
column-span: for headings;
