Pens from Shobhit Sharma https://codepen.io/shobhitsharma/ en nospam@codepen.io Copyright 2024 2022-10-12T10:21:47-07:00 Layout Breakouts with CSS Grid https://codepen.io/shobhitsharma/pen/zYjyaEg https://codepen.io/shobhitsharma/pen/zYjyaEg Shobhit Sharma

See the Code - See it Full Page - See Details

Demo for the article <a href="https://ryanmulligan.dev/blog/layout-breakouts/">Layout Breakouts with CSS Grid</a>.

]]>
Layout Breakouts with CSS Grid 2022-10-12T10:21:47-07:00
Milisecond timer https://codepen.io/shobhitsharma/pen/GREazOm https://codepen.io/shobhitsharma/pen/GREazOm Shobhit Sharma

See the Code - See it Full Page - See Details

]]>
Milisecond timer 2021-10-04T14:36:26-07:00
CSS Collapsible Part 3 https://codepen.io/shobhitsharma/pen/NWpgZZx https://codepen.io/shobhitsharma/pen/NWpgZZx Shobhit Sharma

See the Code - See it Full Page - See Details

]]>
CSS Collapsible Part 3 2021-05-26T13:12:28-07:00
Collapsible CSS Part 1 https://codepen.io/shobhitsharma/pen/YzZQobB https://codepen.io/shobhitsharma/pen/YzZQobB Shobhit Sharma

See the Code - See it Full Page - See Details

]]>
Collapsible CSS Part 1 2021-05-26T13:43:39-07:00
mq-test https://codepen.io/shobhitsharma/pen/RwKmVbN https://codepen.io/shobhitsharma/pen/RwKmVbN Shobhit Sharma

See the Code - See it Full Page - See Details

]]>
mq-test 2021-04-29T08:55:54-07:00
CSS only priority navigation https://codepen.io/shobhitsharma/pen/bGBPGxr https://codepen.io/shobhitsharma/pen/bGBPGxr Shobhit Sharma

See the Code - See it Full Page - See Details

A proof of concept to explore if it's possible to create a priority navigation pattern without JavaScript, using only CSS.

]]>
CSS only priority navigation 2021-03-18T11:27:07-07:00
CSS Layout Grid (display: grid) 1px Border https://codepen.io/shobhitsharma/pen/mdOovqy https://codepen.io/shobhitsharma/pen/mdOovqy Shobhit Sharma

See the Code - See it Full Page - See Details

]]>
CSS Layout Grid (display: grid) 1px Border 2021-03-15T12:26:14-07:00
Responsive Magic Underline https://codepen.io/shobhitsharma/pen/ExNXbbd https://codepen.io/shobhitsharma/pen/ExNXbbd Shobhit Sharma

See the Code - See it Full Page - See Details

The main issue on unlines behind texts is, that the solution is not scalable, because after elements that relies on inline-block-Elements will break down. With this little JavaScript Solution its possible to use this popular design-feature for any text-length.

]]>
Responsive Magic Underline 2021-02-18T17:30:38-07:00
Pure CSS Slider using Scroll-Snap https://codepen.io/shobhitsharma/pen/NWbrZPe https://codepen.io/shobhitsharma/pen/NWbrZPe Shobhit Sharma

See the Code - See it Full Page - See Details

This slider uses the css <code>scroll-snap</code> property as well as css styling for the scrollbar. Unfortunately, these two features have opposite browser support, so you will not see all the aspects of this pen in a single browser. Forked from [Ty Strong](http://codepen.io/tystrong/)'s Pen [Pure CSS Slider using Scroll-Snap](http://codepen.io/tystrong/pen/MwqWXw/).

]]>
Pure CSS Slider using Scroll-Snap 2021-02-09T14:40:33-07:00
Pure CSS dot-slider (no JS) https://codepen.io/shobhitsharma/pen/MWbaymy https://codepen.io/shobhitsharma/pen/MWbaymy Shobhit Sharma

See the Code - See it Full Page - See Details

Absolutely purce CSS slider without JS code. Use labels and :checked pseudo-class on radio-input.

]]>
Pure CSS dot-slider (no JS) 2021-02-03T10:52:32-07:00