w3tweaks
  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
w3tweaks
  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
w3tweaks
Home Effects
CSS in CSS with a lot of C and S

CSS in CSS with a lot of C and S

W3TWEAKS by W3TWEAKS
October 12, 2020
in Effects
0

Giulia Cardieri crafts a cascade of Cs and Ss with SCSS. Phew!

See the Pen CSS in CSS with a lot of C and S by Giulia Cardieri (@giuliacardieri) on CodePen.

You might also like

Box Shadow Patterns

Box Shadow Patterns

October 1, 2020
0
Masked & Skewed

Masked & Skewed

September 30, 2020
0

Created on April 8, 2020 Updated on April 8, 2020. A Pen by Giulia Cardieri on CodePen. License.

Download

index.html

<div class="container">
  <div class="c">
  </div>
  <div class="s">
    <div class="c">
    </div>
    <div class="c">
    </div>
  </div>
  <div class="s">
    <div class="c">
    </div>
    <div class="c">
    </div>
  </div>
</div>
$color-main-1: #9C2855;
$color-main-2: #E14282;
$color-light: #FADCE4;
$color-darker: #7F2044;
$color-darkest: #591630;

body {
  background-color: lightPink;
  margin: 0;
  padding: 0;
}

.container {
  align-items: center;
  display: flex;
  height: 100vh;
  justify-content: center;
}

.c {
  border-left: 20px solid $color-darkest;
  box-shadow: -10px 0px 0 5px $color-darker, -20px 0px 0 6px $color-main-2, -30px 0px 0 7px rgba($color-main-2, 0.6);
  border-radius: 100% 50% 50% 100% / 100%;
  height: 200px;
  width: 180px; 
}

.s {
  display: flex;
  flex-direction: column;
}

.s:not(:last-of-type) {
  margin-right: 75px;
}

.s > .c {
  height: 100px;
  width: 100px;
}

.s > .c:last-of-type {
  transform: rotate(185deg) translateX(5px) translateY(-2px);
}

@media (max-width: 768px) {
  .c {
    height: 100px;
    width: 90px; 
  }
  
  .s:not(:last-of-type) {
    margin: 0 75px 0 25px;
  }
  
  .s > .c {
    height: 50px;
    width: 50px;
  }
}

@media (max-width: 500px) {
  .container {
    transform: scale(0.8);
  }
}
body {
  background-color: lightPink;
  margin: 0;
  padding: 0;
}

.container {
  align-items: center;
  display: flex;
  height: 100vh;
  justify-content: center;
}

.c {
  border-left: 20px solid #591630;
  box-shadow: -10px 0px 0 5px #7F2044, -20px 0px 0 6px #E14282, -30px 0px 0 7px rgba(225, 66, 130, 0.6);
  border-radius: 100% 50% 50% 100% / 100%;
  height: 200px;
  width: 180px;
}

.s {
  display: flex;
  flex-direction: column;
}

.s:not(:last-of-type) {
  margin-right: 75px;
}

.s > .c {
  height: 100px;
  width: 100px;
}

.s > .c:last-of-type {
  transform: rotate(185deg) translateX(5px) translateY(-2px);
}

@media (max-width: 768px) {
  .c {
    height: 100px;
    width: 90px;
  }

  .s:not(:last-of-type) {
    margin: 0 75px 0 25px;
  }

  .s > .c {
    height: 50px;
    width: 50px;
  }
}
@media (max-width: 500px) {
  .container {
    transform: scale(0.8);
  }
}

Tags: text effects
Previous Post

CSS Shapes Forest Collection Spring Summer 2020

Next Post

Chat bubble smoothly morphs into a “close” X

W3TWEAKS

W3TWEAKS

Since I've had a strong background in front-end development, I took the initiative to start my own website (w3tweaks.com) to share my knowledge with the world.

Related Stories

Box Shadow Patterns

Box Shadow Patterns

by W3TWEAKS
October 1, 2020
0
0

Manan Tank shares a selection of fun patterns: "Each pattern is created using a single div, each square or circle...

Masked & Skewed

Masked & Skewed

by W3TWEAKS
September 30, 2020
0
0

Playing with artificial perspective and clipping-masked image and text, inspired by a vintage travel poster and a very stubborn Collie...

Fit Text with CSS Variables

Fit Text with CSS Variables

by W3TWEAKS
September 29, 2020
0
0

Fit text to the viewport with CSS variables! All you need is to know the number of characters, which a...

Buttons popper

Buttons popper

by W3TWEAKS
September 21, 2020
0
0

These unassuming buttons all have a surprise inside! Click for a little pop of particle fun, from Louis Hoebregts. See...

Next Post
chat bubble smoothly morphs into a "close" X

Chat bubble smoothly morphs into a "close" X

Discussion about this post

We bring you the best frontend collections that will fix perfect for news, magazine, personal blog, etc. Check our landing page for details.

  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube