public marks

PUBLIC MARKS from decembre with tags demo & firefox

02 August 2018 09:00

CSS - PRO TIPS - CSS element() function - [: -moz-element()]Vincent De Oliveira

element() brings CSS design to a new level, in an easily way. Few ideas that comes to my mind (some that I've already used since the last 4 years): - when you have to deal with duplicated content in advanced effects - live thumbnails of previous/next slides in a slideshow - live zoom over an image, for example in an e-commerce product page - animated background, using CSS Animations or by referencing a video, canvas or SVG - faking backdrop-filter or filter() - watermark with multiples backgrounds from Lea Verou idea - and anything you’re currently thinking of ;) Few things we can note: - prefixed for now in Firefox: -moz-element() - impact on rendering performance when using multiple reference. Not as bad as CSS filters, but still something you have to consider - there’s a CanIUse support page - Issue Chromium - Issue WebKit - No mention from IE Platform Status

decembre's TAGS related to tag demo

animation +   api +   audio +   background image +   best +   browser +   calc +   caption +   cardsharing +   cle +   code +   collection +   colonne +   color +   column +   css +   css-tricks +   css3 +   currentColor +   decoder +   demodulateur +   design +   dev +   drag +   effect +   effet +   em +   example +   exemple +   fiddle +   float +   font +   guide +   hover +   html +   html5 +   image +   information +   javascript +   jQuery +   jqueryui +   key +   legende +   lenght +   library +   menu +   moteur +   namespace +   nth-child +   online +   online-tool +   order +   outil +   overflow +   panel +   player +   playground +   plugin +   police +   position +   property +   propriéte +   px +   rechercher +   reference +   regexp +   rendering +   reseau +   Responsive +   satellite +   script +   scroll +   scrollbar +   search +   selecteur +   selector +   site +   size +   spip +   srcset +   stackoverflow +   svg +   tab +   target +   tele +   test +   transform +   transition +   tuto +   tutorial +   tutoriel +   tv +   Tympanus +   video +   vintage +   vw +   web +   web-font +   width +   z-index +