1 / 19

Advanced Web Page Styling

Learn advanced CSS styling techniques including transitions, animations, and SASS preprocessing. Enhance your web design skills with this comprehensive tutorial.

gloriacook
Download Presentation

Advanced Web Page Styling

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. AdvancedWeb Page Styling Martin Kruliš by Martin Kruliš (v1.1)

  2. CSS Revision • You should already know… • CSS syntax, selectors, basic properties • Boxing model (margins, paddings, …) • Display modes (inline, block, …) • Positioning (static, absolute, relative, …) • Media • Graphical filters and transformation • Transitions by Martin Kruliš (v1.1)

  3. Revision - Transitions • CSS Property Transitions • Modifications of CSS properties are animated • When pseudo-class changes (e.g., :hover or :target) • Client-side script changes classes, style attribute, … • Properties by Martin Kruliš (v1.1)

  4. Animations • Transitions • Limited way to describe property interpolations • Always interpolating linearly between two states • Time function may be non-linear • Animations • A more complex mechanism of interpolation • Define a set of states between which the values are interpolated • Additional features • Timing, pausing, repetition, alternation, … by Martin Kruliš (v1.1)

  5. Animations • Animation Syntax @keyframescolorize { 0% { color: black; } 30% { color: red; } 100% { color: blue; } } #something { animation-name: colorize; animation-duration: 5s; animation-iteration-count: 3; } Named set of keyframes Each keyframe holds a state of the element at a particular phase of the animation Animation is then applied using CSS properties Example 1 by Martin Kruliš (v1.1)

  6. Animations • Animation Properties • animation-timing-function • Similarly to transitions – time interpolation function • animation-direction • normal, reverse, alternate • animation-iteration-count • Number of iterations or infinite • animation-play-state • paused or running – useful for stopping/resuming • animation-fill-mode • How are the CSS animation styles applied to target by Martin Kruliš (v1.1)

  7. CSS Preprocessing • Major CSS Issues • Selectors are quite powerful but possibly tedious • No variables or global constants • Not particularly DRY-friendly • CSS Preprocessing • Styles are written in preprocessing language and generated into CSS files • Several languages/tools available (LESS, SASS) by Martin Kruliš (v1.1)

  8. SASS • Syntactically Awesome Stylesheets • A style sheet language that extends CSS • It is interpreted into CSS files • The most important features are • Variables – allow single definition of a value • Nesting – more logical organization of the styles • Mixins – CSS templates that can be reused • Selector inheritance – simplifies selector construction • Scripting (loops, conditions, expressions, …) Example 2 by Martin Kruliš (v1.1)

  9. SASS • SASS Syntax • Two syntaxes • Original SASS is based on Haml language • Newer SCSS syntax is more similar to CSS • Actually CSS file is also valid SCSS file SCSS syntax $size: 300px; @mixinmybox($width) { width: $width; } #div1 { @include mybox($size); } SASS (original syntax) $size: 300px =mybox($width) width: $width #div1 +mybox($size) by Martin Kruliš (v1.1)

  10. SASS • Variables and Expressions • Allow definition of values which can be used in the whole stylesheet $width: 900px; $space: 20px; main { width: $width – 2 * $space; padding: $space; } div.box { width: $width / 2 - $space; } Instead of Matryoshka hack Creating boxes organized in 2 columns (half size of the main) by Martin Kruliš (v1.1)

  11. SASS • Nesting • More logical division of styles nav { ul { margin: 0; li { display: inline-block; } } a { color: green; } } navul { margin... } navul li { display... } nav a { color... } by Martin Kruliš (v1.1)

  12. SASS • Selector Inheritance • Shifts the inheritance from base selectors to derived styles .message { padding: 10px; border: 3px solid yellow; } .error { @extend .message; border-color: red; } Selector is updated to .message, .error by Martin Kruliš (v1.1)

  13. SASS • Partials and Includes • Partial files are meant for including only • Naming convention – partial files start with underscore • E.g., _partial.scss • Import directive @import is preprocessed • CSS @import leads to another HTTP request • SASS @import works like include in C/C++/PHP • Typically used with partial files @import '_part.scss' • Import is also used for including mixins by Martin Kruliš (v1.1)

  14. SASS • Mixins • Parametrized fragments of code which can be reused (similar to C macros) @mixinshadow($dist, $blur, $color) { -moz-box-shadow: $dist $dist $blur $color; -webkit-box-shadow: $dist $dist $blur $color; -ms-box-shadow: $dist $dist $blur $color; box-shadow: $dist $dist $blur $color; } #mydiv { @include shadow(5px, 3px, #999); } Example 3 by Martin Kruliš (v1.1)

  15. Responsive Web • Responsive Web Design • The web adjusts layout (and other properties) to the properties (size) of display device • So it can effectively present its contents on small handheld devices as well as on 4K monitors • Possible approaches • Important measurements are expressed relatively in %, vh, and vw units • Multiple layouts (style sheets) are prepared for different devices (and selected by media conditions) • Smart utilization of inline blocks and float elements Example 4 by Martin Kruliš (v1.1)

  16. Responsive Frameworks • Responsive Frameworks • Predefined styles (and possibly scripts) which automatically handle various screen sizes • Developed intensively in last few years • Many frameworks currently available • Twitter Bootstrap • W3.CSS • Skeleton • Foundation • HTML5 Boilerplate • HTML KickStart • … by Martin Kruliš (v1.1)

  17. Bootstrap • Twitter Bootstrap • Originally named Twitter Blueprint • Twitter released it as open source in 2011 • Perhaps the most popular front-end and UI • Basic features • CSS responsive layout based on 12-column grid • Classes for phones, tablets, desktops, and large screens • Many CSS prepared UI controls and templates • Buttons, panels, forms, … • jQuery-based controls • Animations, Carousel, Modal windows, … Example 5 by Martin Kruliš (v1.1)

  18. CSS Tricks • CSS Tricks and Treats • CSS is quite powerful, especially state selectors • A lot of behavior can be simulated without scripting • Pseudoclass:hover • Elaborate animations with opacity or display • Pseudoclass:target • Can be used to keep a state, which can be switched by standard links (with proper fragment URLs) Examples 6-9 by Martin Kruliš (v1.1)

  19. Discussion by Martin Kruliš (v1.1)

More Related