- Price £497.00
- Level Advanced
- Duration 2 day(s)
Description
This class provides the web professional with the ability to design using next-gen’s technology of CSS3 for modern, mobile and future browsers. The course will include design for mobile devices for rendering the visualisation of web pages using CSS3 and adding custom fonts. You’ll also be able to control the rendering, for opacity, multi-column, drop-shadows and many more. Using the same CSS syntax, adding enhanced advanced effects makes it easy for professionals as well as untrained designers to make use of these new features.
Prerequisites
Web professionals who are seeking to provide a more advanced & modern design visualisation using Cascading Style Sheets.
Assumed Knowledge
You should have a working knowledge of HTML & CSS and have at least covered most of the topics in our CSS 101 class
Skills
Upon successful completion of this course you’ll be able to; work with the media query, add custom web fonts, apply text shadows, work with the REM unit, add CSS3 Gradients, round corners, apply a transparency, multicolumn layout, build CSS3 menus, working with CSS3 & jQuery, rotating objects, adding transitions and 3D in CSS3.
Course Content
More on CSS Page Layout
- Alternative Methods of CSS Positioning
- Centering Blocks
- Styling Lists
- Redefining the Behaviour of Inline and Block Elements
- Hiding and Revealing Blocks
- Table Formatting in CSS
- Styling Table Cell Borders
- Page Layout with Table Display Properties
Cascade, Precedence, Specificity and Inheritance in CSS
- Taking Control: Ensuring that CSS Rules Interact in the Way You Want
- Combining Styles: Different Types, Origins, Importance, Specificity and Order
- Examples: Combining Rules
- Cascading and Cascade Order
- Resolving Style Conflicts By Origin
- Resolving Style Conflicts By Importance
- Resolving Conflict By Selector Specificity
- Resolving Conflict By Order
- Non-CSS Presentational Hints
- Property Inheritance
CSS Layers and Translucency
- Different Forms of Layered Presentation in CSS
- Layering with the z-index Property
- Different Methods for Creating Translucency Effects
- The CSS3 opacity Property
- opacity Example
- Fixed Attachment Backgrounds in Layers
- background-attachment Example
- Transparency and Semi-transparency with Alpha-Blended PNG
- PNG Translucency Example and Sample Code
- Pseudo-Transparency with JPG Positioned Backgrounds
- JPG Pseudo Transparency Example
CSS3 on mobile devices
- CSS3 media queries
- Different Sizes
- Orientation Change
Fonts & Text
- Using Custom Fonts
- @font property
- Importing fonts
- Web Font formats
- Buying web fonts
- TypeKit, fontsquirrel
- Using google font api
- Text shadows
- Font sizing with REM
- Enhanced Text Gradients
Enhancing your boxes
- Box rounding
- Adding a Shadow to objects
- Opacity & Transparency
- Colouring with RGB and Alpha
- Adding a CSS3 Gradient
- Rotating objects
- Applying animations & transitions
Backward compatibility tools
- CSS3Pie,
- CSS3Please & Generators
- Transformie, Modernizr
- Selectivizr
Useful CSS Tips
- Usage of CSS Sprites
- Pseudo Selectors
- CSS minify
- Cheat Sheet for CSS3