WSG Co-Chair, Instructional Development - Artworks Web Programmer
I code alot of stuff using various tools and computer
languages:
Bash, Python, Ruby, C++,
PHP, MySQL, SQLite, HTML, HTML5 (ha), CSS, CSS3 (ha), ColdFusion,
Drupal
I
can draw stick
figures ...
HTML or HyperText Markup Language is the standard markup language used to create web pages.
HTML is written in the form of HTML elements consisting of tags enclosed in angle brackets (like
<html>).
Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language. While most often used to style web pages and interfaces written in HTML and XHTML, the language can be applied to any kind of XML document, including plain XML, SVG and XUL. CSS is a cornerstone specification of the web and almost all web pages use CSS style sheets to describe their presentation.
Levels 15 and onward cover CSS3 selectors, you may jump to level 15 by
simply
typing:15 [Enter]
at the interactive prompt.
The whole game should take you ~5 minutes if you know CSS.
This is why we're here! Congrats on getting this far!
CSS3 is backwards compatible, adding it to your source code will not break your page [unless you have a syntax error].
Prior to CSS3 there was a child, descendant and adjacent sibling selectors.
3 new substring matching attribute selectors:
See the Substring.html file and attempt to use substring attribute matching to alter the display of various links used in the file.
Tip: you may find it helpful to simply Save the linked file to your desktop and work on it there using Notepad or Notepad++.
:root – used for the root element, which in HTML is always .
:nth-child(n), :nth-last-child(n), :nth-of-type(n), :nth-last-of-type(n), :last-child, :first-of-type, :last-of-type, :only-child, :only-of-type – these are used to match child and sibling elements based on their order of appearance.
:empty – matches the element that has no children
:target – matches the element that is the target of the referring URI
:enabled, :disabled, :checked, – use these to select the element when it’s enabled, disabled, and checked, respectively
:not(s) – this negation pseudo-classes is used when you need to match an element that does not match the simple selector
We covered nearly all of these in the Plates CSS app!
While pseudo-classes and pseudo-elements might look similar, their function is different.
Pseudo-classes are used to access information that lies outside the document tree. For example, in the document tree we define a link selector but the tree doesn’t give information if the link is :active, :visited, etc. We can do this with the help of pseudo-classes. With pseudo-elements you can create abstractions about the document tree beyond those specified by the document language (i.e. use ::before or ::after pseudo-elements).
In CSS3 pseudo-elements are identified by :: and pseudo-classes by : only.
This can be very confusing because in CSS 1 and 2 pseudo-elements were identified by single colon (:), i.e. :before and :after and for compatibility reasons browsers do accept this but for the new pseudo-elements in CSS3 this is not valid, so you need to use double colon (::).
This is an important distinction because when you use CSS you want to make sure it is valid, Validating CSS files, As a designer you need to know what version of CSS the file your writing is written for to validate it and what your intended device and user audience is.
::first-line
::first-letter
::before
::after
cursor: auto
cursor: inherit
cursor: crosshair
cursor: default
cursor: help
cursor: move
cursor: pointer
cursor: progress
cursor: text
cursor: wait
cursor: e-resize
cursor: ne-resize
cursor: nw-resize
cursor: n-resize
cursor: se-resize
cursor: sw-resize
cursor: s-resize
cursor: w-resize
We have more styles to choose from in CSS3. These work in IE9 and the latest versions of Firefox, Chrome, Safari and Opera except where indicated:
cursor: none (not IE, Safari, Opera)
cursor: context-menu (not Firefox, Chrome)
cursor: cell (not Safari)
cursor: vertical-text
cursor: alias (not Safari)
cursor: copy (not Safari)
cursor: no-drop
cursor: not-allowed
cursor: ew-resize
cursor: ns-resize
cursor: nesw-resize
cursor: nwse-resize
cursor: col-resize
cursor: row-resize
cursor: all-scroll
Mozilla and some editions of Chrome and Safari offer a number of vendor-prefixed cursor styles which are likely to become part of the CSS3 specification:
cursor: -webkit-grab; cursor: -moz-grab;
cursor: -webkit-grabbing; cursor: -moz-grabbing;
cursor: -webkit-zoom-in; cursor: -moz-zoom-in;
cursor: -webkit-zoom-out; cursor: -moz-zoom-out;
Finally, you can create your own cursor graphic, e.g.
cursor: url(images/cursor.cur);
cursor: url(images/cursor.png) x y, auto;
Ugly Notes:
The background property now supports multiple images.
The different backgrounds get stacked atop where the first is closest to the viewer. They are separated by commas.
background: url(image1.png), url(image2.png), url(image3.png) #666666
background property, where the most important are background-position and background-repeat. By default they are positioned top left and get repeated at the x- and y-axis.CSS3 is backwards compatible, it won't break old browsers. It just won't show what you want most likely. Is there a workaround?
See Legacy Browsers and CSS3 file (version 1 broken example) and Legacy Browsers and CSS3 file (version 2) for an example.Defines where the background image(s) is/are positioned.
background-origin: padding-box | border-box | content-box
padding-box, default value).In the following example, play around the with background-origin attributes: padding-box, border-box and content-box. You can try this with multiple background images if you want.
Used to resize the background image(s).
background-size: cover | contain | dimension units
px) or relative (em) units, can be auto (original size, default), cover or contain. In combination with multiple background images the different values are separated by commas.25% of the height of containing element. If not set it is assumed to be auto.In the following example, play around the with background-size attributes trying cover, contain and dimensions. You can try this with multiple background images if you want.
Two new border properties were added: border-radius and border-image.
Used to round the corners of an element that has the border or background property set.
border-radius: 8px / 13px
border-radius is short for: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius
More visual examples can be seen at CSS3Files Border section.
border-image: url(image.png) 3 / 5px round
border-width property set. General shorthand rule applys.stretch (default), round and repeat (see examples). If one value is set it is taken for all four sides of the border, with two value the first applys to top/bottom and the second to left/right. This value has no effect on the corners.More visual examples can be seen at CSS3Files Border section or you can see an example at BorderImage.com.
The gist is -- an image can be broken up into quadrents and used as the border for an Element.
@font-face is now widely supported.
Other font properties are in the works but not widely supported: font-stretch, font-size-adjust, font-synthesis, font-kerning, font-variant-caps
The next slide shows the @font-face CSS declaration. In the following examples I will likely use Google Fonts which uses @font-face but does alot of the work for you.
@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');
}font-family property. If the font should be assigned to all <h2> headlines for example you have to write h2 { font-family: "FontName", sans-serif }. Can be choosen freely.eot fontfile. Can be omitted if you don`t want to support Internet Explorer prior to version 9 (including semicolon).?iefix prevents IE6 from interpreting all of the following. If the whole IE family (6 to 9) should be supported, 2 and 3 are needed.FontName is the same as at 1.ttf fontfile. Necessary to support (Mobile) Safari and Opera. woff fontfile for all modern browsers (best choice).Please see this example HTML file and copy and paste it to your Desktop using Notepad. Then edit the file and attempt to make the Header one google font, and the body text another Google Font. Then use this image to use border-image to the content of the page that looks like a paper document.
CSS3 added the ability to shadow elements and text, using box-shadow and text-shadow
Multiple shadows can be assinged comma separated.
box-shadow: inset 4px 4px 16px 10px #000
0).rgbahsla color values are possible.Is used to assign one or more shadows to text.
Multiple shadows can be assinged comma separated.
text-shadow: 4px 4px 14px #969696
0).CSS3 supports Opacity as a property to an element. it is simply a value between 1.0 and 0. Eg, .5 would be 50% see-through, .65 would be 65% transparent, etc.
Use this HTML file as a starting point to create a menu overlayed an image with a transparent color background. These example output could help you.
Use this HTML file as a starting point of a simple thumbnail gallery. Attempt to make the gallery not just square images. At this point you should be able to add for instance rounded corners to the pictures, or make them appear to be inset into the page.
Why is it good we can do this now using CSS3?
Text properties had alot of additions in CSS3. I will likely not review them all. They consist of: text-align-last, text-decoration-line, text-decoration-skip, text-decoration-position, text-decoration-style, text-emphasis, text-justify, text-orientation, text-overflow and text-shadow
Earlier we covered text-shadow.
Consists of a media type and zero or more expressions that check for the conditions of particular media features. Among the media features that can be used in media queries are ‘width’, ‘height’, and ‘color’. P presentations can be tailored to a specific range of output devices without changing the content itself.
This sample HTML file uses Media queries. Examine it and see how it collapses, the rules, etc.
The following is from a Drupal settings file for a website being developed for a campus project:
settings[bigscreen_media_query] = only screen and (min-width:1025px)
settings[tablet_landscape_media_query] = only screen and (min-width:769px) and (max-width:1024px)
settings[tablet_portrait_media_query] = only screen and (min-width:581px) and (max-width:768px)
settings[smalltouch_landscape_media_query] = only screen and (min-width:321px) and (max-width:580px)
settings[smalltouch_portrait_media_query] = only screen and (max-width:320px)
This settings file convention is the Layout Name = Media Query expressions used to activate the rulesets.
Typically, either in code or your CSS file filename you try to organize your responsive css files by descriptive name.
This is a website in the works, demo02.id.ucsb.edu. This site is Responsive. There are some behaviors on the site that are not great for mobile devices, can we fix: 1) The extra items appearing in the menus for mobile devices. 2) Hide the "Section Image" displayed per section on Mobile to save bandwidth.
Other things we could do: 1) Add an inset or box-shadow to the gallery. Assign additional Google fonts someplace.
Thank you all for attending this session. I hope you walk away learning something new about CSS3. Questions and comments please contact me at dgurba@id.ucsb.edu. I also recommend attending the Web Standards Group sessions!