css

CSS Drawing - Beach Scene

Posted in css
14
1:24 am, July 20, 2021

CSS Drawing - Beach Scene

i did this one a while ago, cantr even remember it just appeared when i searched in google. 

here is an animated version, check the bottom for the css version of this:

 

HTML

<div class='wrap-box'>
  <div class='main-box'>
    <div class='sky'></div>
    <div class='sea'>
      <span class='line'></span>
      <span class='line'></span>
      <span class='line'></span>
      <span class='line'></span>
      <span class='line'></span>
      <span class='line'></span>
      <span class='line'></span>
      <span class='line'></span>
      <span class='line'></span>
      <span class='line'></span>
      <span class='line'></span>
      <span class='line'></span>
    </div>
    <div class='beach'>
      <div class='sand-dots'>
        <span class='dot'></span>
        <span class='dot'></span>
        <span class='dot'></span>
        <span class='dot'></span>
        <span class='dot'></span>
        <span class='dot'></span>
        <span class='dot'></span>
        <span class='dot'></span>
        <span class='dot'></span>
        <span class='dot'></span>
        <span class='dot'></span>
        <span class='dot'></span>
        <span class='dot'></span>
        <span class='dot'></span>
        <span class='dot'></span>
        <span class='dot'></span>
        <span class='dot'></span>
        <span class='dot'></span>
        <span class='dot'></span>
        <span class='dot'></span>
        <span class='dot'></span>
      </div>
    </div>
    <div class='cloud cloud-one'>
      <div class='cloud-inner'>
        <div class='cloud-right'></div>
        <div class='cloud-middle'></div>
        <div class='cloud-left'></div>
      </div>
    </div>
    <div class='cloud cloud-two'>
      <div class='cloud-inner'>
        <div class='cloud-right'></div>
        <div class='cloud-middle'></div>
        <div class='cloud-left'></div>
      </div>
    </div>
    <div class='cloud cloud-three'>
      <div class='cloud-inner'>
        <div class='cloud-right'></div>
        <div class='cloud-middle'></div>
        <div class='cloud-left'></div>
      </div>
    </div>
    <div class='cloud cloud-four'>
      <div class='cloud-inner'>
        <div class='cloud-right'></div>
        <div class='cloud-middle'></div>
        <div class='cloud-left'></div>
      </div>
    </div>
    <div class='sun'></div>
    <div class='tree'>
      <div class='tree-bits'>
        <div class='leaf leaf-one'></div>
        <div class='leaf leaf-two'></div>
        <div class='leaf leaf-three'></div>
        <div class='leaf leaf-four'></div>
        <div class='trunk trunk-one'></div>
    
      </div>
     </div>
    
  </div>
</div>

CSS

.wrap-box {
  width: 400px;
  margin:0 auto;
  /*
  top: 50%;
  left: 50%;
  position:absolute;
  margin-left:-200px;
  margin-top:-200px;
  */
}

.main-box:hover {
    transform: rotate(-3deg);
    transition: 0.3s; 
    box-shadow:0px 0px 20px rgba(0,0,0,0.2);
}
.main-box {
  border-radius:3px;
  height: 400px;
  background: #EFEFEF;
  border:10px solid #FFF;
  box-shadow:0px 0px 10px rgba(0,0,0,0.1);
  position:relative;
  overflow:hidden;
  transition: 0.3s; 
}
.sky {
  width:100%;
  height:150px;
  background:linear-gradient(#038ec9,#bdf0f1);
}
.sea {
  width:100%;
  height:130px;
  background:linear-gradient(#016dad,#90dfe3);
}
.beach {
  width:100%;
  height:100px;
  background:linear-gradient(#fdf6cb,#dda863);
}
.cloud {
  position:absolute;
  top:20px;
  right:10px;
  opacity:0.8;
  width:80px;
  filter: drop-shadow(0 1px 10px rgba(0,0,0,0.1));
  animation:clouds 60s infinite;
}
.cloud-one {
  top:50px;
  right:30px;
  zoom:1.2;
  animation:cloud-one 60s infinite;
}
.cloud-two {
  top:90px;
  left:30px;
  opacity:0.7;
  animation:cloud-two 20s infinite;
}
.cloud-three {
  top:70px;
  left:50px;
  opacity:0.7;
}
.cloud-four {
  top:70px;
  right:100px;
  opacity:0.9;
  zoom:0.7;
}
.cloud-inner {
  position:relative;
}
.cloud-inner div {
  background:#FFF;
}
.cloud-middle {
  width:80px;
  height:30px;
  background:rgba(255,255,255,0.3);
  border-radius:30px;  
}
.cloud-right {
  position:absolute;
  right:10px;
  top:-20px;
  height:30px;
  width:30px;    
  border-radius:50px;  
  background:rgba(255,255,255,0.3);
}
.cloud-left {
  position:absolute;
  left:10px;
  top:-20px;
  height:35px;
  width:35px;    
  border-radius:50px;  
}
.sand-dots .dot {
  background:rgba(0,0,0,0.1);
  height:3px;
  width:3px;
  border-radius:10px;
  display:inline-block;
  margin:9px 5px 8px 10px;
  float:left;
}
.dot:nth-child(1) { margin-top:30px; }
.dot:nth-child(2) { margin-top:68px; }
.dot:nth-child(3) { margin-top:28px; }
.dot:nth-child(4) { margin-top:21px; }
.dot:nth-child(5) { margin-top:92px; }
.dot:nth-child(6) { margin-top:47px; }
.dot:nth-child(7) { margin-top:22px; }
.dot:nth-child(8) { margin-top:58px; }
.dot:nth-child(9) { margin-top:13px; }
.dot:nth-child(10) { margin-top:73px; }
.dot:nth-child(11) { margin-top:95px; }
.dot:nth-child(12) { margin-top:24px; }
.dot:nth-child(13) { margin-top:40px; }
.dot:nth-child(14) { margin-top:53px; }
.dot:nth-child(15) { margin-top:73px; }
.dot:nth-child(16) { margin-top:4px; }
.dot:nth-child(17) { margin-top:82px; }
.dot:nth-child(18) { margin-top:93px; }
.dot:nth-child(19) { margin-top:4px; }
.dot:nth-child(20) { margin-top:10px; }
.dot:nth-child(21) { margin-top:92px; }
.sea .line {
  display:block;
  height:2px;
  width:10px;
  background:rgba(255,255,255,0.1);
  position:absolute;
}
.sea {
  position:relative;
}
.line:nth-child(1) { top:10px; left:331px; }
.line:nth-child(2) { top:20px; left:257px; }
.line:nth-child(3) { top:30px; left:126px; }
.line:nth-child(4) { top:40px; left:346px; }
.line:nth-child(5) { top:50px; left:275px; }
.line:nth-child(6) { top:60px; left:35px; }
.line:nth-child(7) { top:70px; left:190px; }
.line:nth-child(8) { top:80px; left:235px; }
.line:nth-child(9) { top:90px; left:66px; }
.line:nth-child(10) { top:100px; left:351px; }
.line:nth-child(11) { top:110px; left:240px; }
.line:nth-child(12) { top:120px; left:322px; }

@keyframes cloud-one {
  0% {
    left:-100px;
  }
  100% {
    left:450px;
  }
}
@keyframes cloud-two {
  0% {
    left:450px;
  }
  100% {
    left:-100px;
  }
}

.line {
  animation: waves 5s infinite;
}
@keyframes waves {
  0% {
    margin-left:0px;
    margin-bottom:0px;
    transform: rotate(0deg);
  }
  25% {
    margin-left:10px;
    margin-bottom:0px;
    transform: rotate(-10deg);
  }
  50% {
    margin-left:15px;
    margin-bottom:5px;
    transform: rotate(0deg);
  }
  75% {
    margin-left:10px;
    margin-bottom:5px;
    transform: rotate(10deg);
  }
  100% {
    margin-left:0px;
    margin-bottom:0px;
    transform: rotate(0deg);
  }
}
.sun {
  width:50px;
  height:50px;
  position:absolute;
  top:10px;
  right:10px;
  background:rgba(255, 214, 0, 0.84);
  border:3px solid rgba(255, 214, 0, 0.3);
  border-radius:100px;
  filter: drop-shadow(0 1px 10px rgba(255, 214, 0, 0.7));
}
.tree {
    position: absolute;
    bottom: -10px;
    right: 25px;
    width: 100px;
    height: 200px;
}
.tree-bits {
  position:relative;
}
.trunk {
  background:#865415;
  width:30px;
  height:200px;
  border-radius:30px;
  transform: rotate(-20deg);
  position:absolute;
  right:0px;
}
.leaf { 
  position:absolute;
  width: 100px; height: 100px;
  background-color: #A0DE21; 
  -moz-border-radius: 100px 0px;
  -webkit-border-radius: 100px 0px;
  border-radius: 100px 0px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
}
.leaf-one {
    right: 41px;
    top: 8px;
    z-index: 1;  
}
.leaf-two {
    right: -62px;
    top: -39px;
    z-index: 1;
    transform: rotate(42deg);
}
.leaf-three {
    right: 64px;
    top: -25px;
    z-index: 1;
    transform: rotate(42deg);
}
.leaf-four {
    display:none;
    right: 64px;
    top: -20px;
    z-index: 1;
    transform: rotate(42deg);
}

Javascript

/* 
tags: css animation, css clouds

Inspiration: Hey Duggie. ;)
to generate the random pixel locations i just used the google random number generator 
Note: yes the clouds are a bit weird.
- to add.
-: sun
- : palm tree
: leaves
: bucket
: spade
: shells
: bird 

CSS Leaf from here: https://jsfiddle.net/xwvyo1c5/
*/
Posted in css
14
1:24 am, July 20, 2021

External Link for CSS Drawing - Beach Scene

View Statistics
This Week
82
This Month
540
This Year
0

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Items in css
add an outline to everything! hide the first h3 tag on the page with css center align vertical 2 items in a container flex simple javascript no library accordion button zoom effect with expanding background scroll left animation using css counter-increment to add numbering to elements hidden scroll anchor for custom scroll position ken burns slow image zoom using a radial gradient for background overlay change selected color on input elements css animated duck on footer using filter grayscale to make an image dark bootstrap dark mode twitter icon font awesome how to bundle css files together using windows or mac button with separated chevron vertically align text within a fixed height div using flex how to view a web page in its printer format white space break word css roboto and poppins fonts include quick code CSS Drawing - Beach Scene 404 Error Page Codepen right align something in its element hide the third row in a table with css how to make a transparent logo white with css target last item css with :last-of-type target first item css with :first-of-type responsive menu research full screen multi level make your images look non squished when not using image backgrounds v2 target 1st td in a table with css backdrop-filter: blur(10px); add chevrons to a ul list foundation responsive tables allow a title to be in the foreground while still having a before overlay for the background css responsive max and min targets @media pre-line white space settings pre-wrap preserve line spacing but also wrap where needed css double page document preview with shadow adding a background image to the titles of the dark mode card on this page blur the background image while keeping the foreground normal background image greyscale filter while foreground is still in colour zoom background of element when active rounded click me button with icon logo tickers marquee slow scrolling add a moving chevron to your href link inline form field padding using text-stroke to add a border to your text adding background blur to an image using css fill screen using the nth-of-type selector to target a class with the same name
Related Search Terms
css location 1
css Animation 9
css when 8
css back 7
css order 9
css the 12
css Generate 12
css Play 23
css solid 29
css middle 20
css generate 22
css drop 25
css cant 24
css Shadow 23
css Display 22
css border 21
css Height 21
css margin 23
css css 31
css style 25
css transition 25
css Random 28
css height 24
css shadow 41
css CSS 27
css Gradient 25
css Order 23
css web 26
css tags 22
css shell 13
css search 34
css remember 19
css play 27
css overflow 25
css linear-gradient 20
css kruxor 28
css just 27
css gradient 21
css gif 25
css from 30
css form 27
css flow 29
css filter 15
css even 25
css display 25
css check 18
css block 27
css appear 22
css animation 20
css animated 19
css animate 17
css abs 25
css Web 23
css Google 24
css Check 21
css Block 21
css Appear 24
css -gradient 20
css generator 20
css code 26
css this 21
css random 22
css here 30
css zoom 25
css nth- 18
css nth 23
css css clouds 21
css css animation 22
css CSS Drawing 19
css Beach Scene 23
Other Categories in Code
c testing apache apps asp bat bootstrap bootstrap templates core css css grid design elements fancybox fonts foundation framework gimp git html icons ideas images javascript jquery js linux mac nginx node php php functions php simple html dom pi400 python react sections site bugs site documentation sql sqlite sublime svg templates tools virtual box webdev windows wordpress
Code Articles Forster Links Tools
Search Code
Search Code by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code snippits here, mostly for my reference. Also if i find a good site, i usually add it here.

Join me on Substack if you want me to send you a collection of the things i have done or found or read for the week. Or follow me on twitter if you prefer, i dont post much but i probably should!

❤👩‍💻🕹

Random Quote
There is a qualitative and quantitative difference between a day that begins with a little exercise, a book, meditation, a good meal, a thoughtful walk, and the start of a day that begins with a smartphone in bed.
Unknown