Pens from WebMadeWell https://codepen.io/webmadewell/ en nospam@codepen.io Copyright 2024 2023-08-11T16:08:37-07:00 Pie chart with SVG https://codepen.io/webmadewell/pen/wvQLpjm https://codepen.io/webmadewell/pen/wvQLpjm WebMadeWell

See the Code - See it Full Page - See Details

]]>
Pie chart with SVG 2023-08-11T16:08:37-07:00
Line charts with CSS only https://codepen.io/webmadewell/pen/xxQxxZv https://codepen.io/webmadewell/pen/xxQxxZv WebMadeWell

See the Code - See it Full Page - See Details

]]>
Line charts with CSS only 2023-06-08T16:34:14-07:00
Parallax div element's scrolling effect with jQuery using CSS transform https://codepen.io/webmadewell/pen/EqwxEJ https://codepen.io/webmadewell/pen/EqwxEJ WebMadeWell

See the Code - See it Full Page - See Details

Give floating parallax effect to div elements by manipulating the elements’ y-position with jQuery and CSS transform. See more detailed guide @ https://webmadewell.com/parallax-div-elements-scrolling-effect-with-jquery-using-css-transform/

]]>
Parallax div element's scrolling effect with jQuery using CSS transform 2019-08-03T21:34:21-07:00
Pure CSS Border Animation on Responsive Div https://codepen.io/webmadewell/pen/YbyNqr https://codepen.io/webmadewell/pen/YbyNqr WebMadeWell

See the Code - See it Full Page - See Details

]]>
Pure CSS Border Animation on Responsive Div 2019-05-08T12:02:50-07:00
CSS Animations created for a Housing Agency https://codepen.io/webmadewell/pen/gyOmeO https://codepen.io/webmadewell/pen/gyOmeO WebMadeWell

See the Code - See it Full Page - See Details

Responsive CSS animations created for a Housing Agency website. The visual elements are based on their logo. Copyright (c) 2019 by <a href="https://webmadewell.com" target="_blank">WebMadeWell</a> . All rights reserved.

]]>
CSS Animations created for a Housing Agency 2019-03-31T21:07:50-07:00
Background image moving horizontally as scrolling down https://codepen.io/webmadewell/pen/bKyemQ https://codepen.io/webmadewell/pen/bKyemQ WebMadeWell

See the Code - See it Full Page - See Details

A very simple horizontal parallax effect using jQuery .css() method. A step by step guide at https://webmadewell.com/background-image-moving-as-scrolling/ <br>By <a href="http://webmadewell.com" target="_blank">webmadewell.com</a>

]]>
Background image moving horizontally as scrolling down 2019-07-20T22:44:57-07:00
Adding tabs into CSS grid using simple jQuery https://codepen.io/webmadewell/pen/yjYpjR https://codepen.io/webmadewell/pen/yjYpjR WebMadeWell

See the Code - See it Full Page - See Details

Turning CSS grid into clickable tabs with simple jQuery. See more detailed guide @ https://webmadewell.com/clickable-css-grid-tabs/

]]>
Adding tabs into CSS grid using simple jQuery 2019-07-21T02:38:28-07:00
CSS Grid Responsive - Change of grid layouts by screen size https://codepen.io/webmadewell/pen/LmEOew https://codepen.io/webmadewell/pen/LmEOew WebMadeWell

See the Code - See it Full Page - See Details

Simple responsive layouts using CSS grid. See more detailed guide @ https://webmadewell.com/css-grid-responsive-layouts/

]]>
CSS Grid Responsive - Change of grid layouts by screen size 2018-09-17T19:55:31-07:00
CSS Grid Basic - display: grid & display: inline-grid https://codepen.io/webmadewell/pen/PRGaVM https://codepen.io/webmadewell/pen/PRGaVM WebMadeWell

See the Code - See it Full Page - See Details

When columns as colour blocks have different heights, inline them with the same height can be achieved simply with CSS grid. See more detailed guide @ https://webmadewell.com/css-grid-basic-display-grid

]]>
CSS Grid Basic - display: grid & display: inline-grid 2018-09-17T19:55:51-07:00
Turn div elements into numbers with CSS only https://codepen.io/webmadewell/pen/VXwOZK https://codepen.io/webmadewell/pen/VXwOZK WebMadeWell

See the Code - See it Full Page - See Details

Turning a series of div elements into a sequence of numbers using a very simple CSS trick. This can be useful when you want to show numbers instead of dots within sliders. Super easy and effective. See more detailed guide @ https://webmadewell.com/turning-div-elements-into-numbers

]]>
Turn div elements into numbers with CSS only 2018-09-17T19:58:07-07:00