CSS Archives - Shawn DeWolfe Consulting https://shawndewolfe.com/category/code-example/css-code-example Web Design | WordPress Development | WordPress Support Tue, 14 Jan 2020 17:44:50 +0000 en-US hourly 1 https://wordpress.org/?v=7.1.1 https://shawndewolfe.com/wp-content/uploads/2019/05/cropped-favicon-32x32.png CSS Archives - Shawn DeWolfe Consulting https://shawndewolfe.com/category/code-example/css-code-example 32 32 CSS: An Expanding Circle Transition https://shawndewolfe.com/css-circle-transition.html Tue, 14 Jan 2020 17:39:36 +0000 https://shawndewolfe.com/?p=3904 As the image scrolls down, a CSS filter is applied. In this case, it's a black-and-white filter to wash out the colour. Other options include a sepia filter, a blur filter, a zoom filter.

The post CSS: An Expanding Circle Transition appeared first on Shawn DeWolfe Consulting.

]]> I wanted to do a transitio neffect with the following elements:

  • Layers with backgrounds are reveled within an expanding circle.
  • Inside of each layer there can be a background or text as well as animation effects (eg. the shrinking number)
  • The transition delay can be adjusted to show one layer or another for a longer period of time.

See the Pen Circle Transition Filter by Shawn DeWolfe (@dewolfe001) on CodePen.

The post CSS: An Expanding Circle Transition appeared first on Shawn DeWolfe Consulting.

]]> Color Picker https://shawndewolfe.com/color-picker Sat, 12 Oct 2019 18:02:03 +0000 https://shawndewolfe.com/?p=1878 A Colour Wheel Picker. Choose the colours you want.

The post Color Picker appeared first on Shawn DeWolfe Consulting.

]]> This colour wheel allows users to choose the braces elastics they want. It’s a fun little tool. More than that, it’s a ranking magnet. A ranking magnet? Google and others assess how long a user is on a web page. This gives people a chance to experiment with the brace elastic colours. While this wheel works for teeth, it could be swapped for anything else that needs to be customized.

See the Pen ColorPicker by Shawn DeWolfe (@dewolfe001) on CodePen.

Do you want a colour picker like this for your project? Contact me!

The post Color Picker appeared first on Shawn DeWolfe Consulting.

]]> CSS: A Filter on Parallax https://shawndewolfe.com/css-a-filter-on-parallax Sat, 12 Oct 2019 16:43:34 +0000 https://shawndewolfe.com/?p=1875 As the image scrolls down, a CSS filter is applied. In this case, it's a black-and-white filter to wash out the colour. Other options include a sepia filter, a blur filter, a zoom filter.

The post CSS: A Filter on Parallax appeared first on Shawn DeWolfe Consulting.

]]> I wanted to do a scrolling effect with the following elements:

  • As the image scrolls down, a CSS filter is applied. In this case, it’s a black-and-white filter to wash out the colour
  • Other options include a sepia filter, a blur filter, a zoom filter

See the Pen Parallax Filter by Shawn DeWolfe (@dewolfe001) on CodePen.

The post CSS: A Filter on Parallax appeared first on Shawn DeWolfe Consulting.

]]> CSS and Javascript effect: A Misty Reveal https://shawndewolfe.com/css-and-javascript-effect-a-misty-reveal Sat, 12 Oct 2019 15:56:46 +0000 https://shawndewolfe.com/?p=1867 An example of how to make a transition effect that fades away.

The post CSS and Javascript effect: A Misty Reveal appeared first on Shawn DeWolfe Consulting.

]]> I wanted to do a reveal with the following elements:

  • It masks a region behind a layer. In this case, a PNG with some transparency
  • On hover, it zooms and adds a blur effect to make it look misty
  • As it zooms in, its opacity diminishes
  • I added some JQuery code to remove the misty layer altogether.
  • The shape of the foreground image can be changed.

See the Pen Mist Donut by Shawn DeWolfe (@dewolfe001) on CodePen.

The post CSS and Javascript effect: A Misty Reveal appeared first on Shawn DeWolfe Consulting.

]]>