recentpopularlog in

piperh : position   27

Applying Styles Based on the User Scroll Position with Smart CSS • PQINA
title: Applying Styles Based on the User Scroll Position with Smart CSS
webdesign  web  design  scroll  position  style  css  page  offset  html  js  javascript  script 
february 2019 by piperh
Creating sliding effects using sticky positioning | CSS-Tricks
Using position: sticky to show and hide elements within a container. A sort-of poor man's parallax. No support in IE but otherwise good.
webdesign  web  design  css  sticky  position  fixed  show  hide  slide 
september 2018 by piperh
GRID: A simple visual cheatsheet for CSS Grid Layout
css grid layout/code chart + diagrams show position effect. Divided into 'container' and 'children', like flexbox. Each main declaration has brief intro text. Very clear, simple reference.
webdesign  web  design  layout  css  grid  cheatsheet  reference  code  position  chart 
august 2018 by piperh
The Quirks of CSS Grid and Absolute Positioning
intro: It’s quite possible to use CSS positioning on grid items, just as you would with most other elements. There are one or two quirks, however, ...
webdesign  web  design  layout  position  positioning  absolute  css  grid 
july 2018 by piperh
Easier scrollytelling with position sticky
About using position: sticky for scrolling events
webdesign  web  design  css  position  sticky  fixed 
june 2018 by piperh
Sticky as a Local Fixed? | CSS-Tricks
trick to make an element have a position fixed in a local context - not scroll
webdesign  web  design  css  position  sticky  modal  scroll  local  absolute  fixed  transform  scope 
march 2018 by piperh
The Future Belongs to CSS
nice use of position: sticky; along with :not
webdesign  web  design  css  position  sticky 
january 2018 by piperh
Stickybits
not a polyfill they say. Code that allows you to use position:sticky;
webdesign  web  design  js  javascript  script  jquery  sticky  position  polyfill 
june 2017 by piperh
Link with Gradient Underline · GitHub
use text shadow and background image to get an underline on a link. Only advantage seems to be to get descenders to have a white outline, so they look better where they pass over the underline
webdesign  web  design  css  text  shadow  underline  link  background  image  position 
may 2017 by piperh
the new code – Even Stevens: Using Round and Space in Repeated Background Images
article explaining css background: round; and space;
for different results of tiling bg images
webdesign  web  design  css  background  space  round  position  positioning  layout  image  code  coding 
october 2016 by piperh
Practical positioning examples - Learning web development | MDN
mozilla learning pages. Nothing in this page that I didn't know but there's some useful vanilla js for applying/removing classes
webdesign  web  design  mozilla  learn  learning  code  coding  css  tab  tabbed  position  positioning 
august 2016 by piperh
The box-shadow Property
good reference for using box-shadow - shows order of values
webdesign  web  design  box-shadow  shadow  css  offset  blur  spread  color  position  effect  reference 
may 2016 by piperh
Using CSS's object-fit and object-position Properties
article about 2 css properties: object-fit and object-position for images and video. Like background-fit etc. but less support, esp no IE or Edge (May 2016)
webdesign  web  design  object  fit  position  css  object-fit  object-position  video  image  img 
may 2016 by piperh
GitHub - soenkekluth/sticky-state: StickyState is a high performant module making native position:sticky statefull and polyfilling the missing sticky browser feature
a polyfill for sticky position. An element will scroll up until it reaches (e.g.) top of screen, then it remains in position fixed.
webdesign  web  design  sticky  position  fixed  scroll  css  js 
march 2016 by piperh
drop
js and css library for dropdowns. Looks maybe too nerdy for me, but perhaps in the future I wouldn't feel daunted by it. No demos
webdesign  web  design  js  javascript  dropdown  popup  list  select  position 
march 2016 by piperh
22 Essential CSS Recipes
article showing some great uses of css. Not all supported by all modern browsers but worth rereading now and again
webdesign  web  design  css  html  blend  mode  gradient  transition  z-index  currentColor  object-fit  checkbox  radio  button  counter  shadow  @supports  position  sticky  vw  vh  scroll 
january 2016 by piperh

Copy this bookmark:





to read