Upgrade to Pro — share decks privately, control downloads, hide ads and more …

NoJS CSS

NoJS CSS

Cool stuff you can do in pure CSS (no JavaScript).

Anca Spatariu

March 01, 2017
Tweet

More Decks by Anca Spatariu

Other Decks in Technology

Transcript

  1. WHY IS CSS UNPOPULAR? • Some hate it because they

    don’t understand it • The others hate it even after understanding it • And there are those few exceptions…
  2. COMMON USE • Many use Bootstrap Modals without actually knowing

    how or why they work (It’s magic!) • Modals are implemented fairly easy in JS (jQuery FTW!)
  3. PURE CSS MODAL • Using :target (the unique element, if

    any, with an id matching the fragment identifier of the URI of the document.) • IE9+ > can i use
  4. PURE CSS CAROUSEL • Using radio buttons (believe it or

    not) • Using the ~ selector (general sibling selector - separates two selectors and matches the second element only if it is preceded by the first, and both share a common parent.) • IE9+ > can i use
  5. FANCY ORDERED LISTS - daca vrem sa facem mai mult

    decat o simpla lista ordonata. - numerotare subcapitole
  6. PURE CSS ORDERED LIST • Using counters • for container

    - counter-reset - resets counters to a given value (0 or specified) • for item - counter-increment (increments value) and content: counter(counter-name); (displays value) • IE8+ > can i use
  7. PURE CSS TEXT TRUNCATION • Using • text-overflow: ellipsis; •

    overflow: hidden; • white-space: nowrap; • Tricky browser support > can i use • Works for one line only (except FF: line-clamp)