Split an Image using CSS


Split Image with CSS


This is a really cool program to split an image using CSS

*Featured Code Created by Calvin


 HTML with CSS


<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
        <style>
            body {
    background-color: beige;
}

.bg {
    width: 170px;
    height: 170px;
    background-image: url(https://www.dropbox.com/s/5zursiwsf8zxogr/r2d2-dessert.jpg?raw=1);
    position: absolute;
    top: 10px;
    left: 10px;
    box-shadow: 0px 0px 0px gray;
    
    
}

.bg1 {
    background-position: 0px 0px;
    transform: rotate(0deg);
    animation: b1 5s linear 5s 1 forwards;
}


.bg2 {
    background-position: 170px 0;
    left: 180px;
    transform: rotate(0deg);
    animation: b2 5s linear 5s 1 forwards;
}

.bg3 {
    background-position: 0 170px;
    top: 180px;
    transform: rotate(0deg);
    animation: b3 5s linear 5s 1 forwards;
}


.bg4 {
    background-position: 170px 170px;
    left: 180px;
    top: 180px;
    transform: rotate(0deg);
    animation: b4 5s linear 5s 1 forwards;
}

@keyframes b1 {
    to {
        background-position: 0px 0px;
        transform: rotate(5deg);
        box-shadow: 2px 2px 2px gray;
    }
}


@keyframes b2 {
    to {
        left: 220px;
        transform: rotate(-2deg);
        box-shadow: 2px 2px 2px gray;
    }
}

@keyframes b3 {
    to {
        top: 250px;
        transform: rotate(3deg);
        box-shadow: 2px 2px 2px gray;
    }
}

@keyframes b4{
    to {
        left: 220px;
        top: 230px;
        transform: rotate(-2deg);
        box-shadow: 2px 2px 2px gray;
    }
}

        </style>
        
    </head>
    <body>
       <div class="bg bg1"></div>
       <div class="bg bg2"></div>
       <div class="bg bg3"></div>
       <div class="bg bg4"></div>
    </body>

Comments

Post a Comment

Popular posts from this blog

Crypto Mining

Image
How to create a free website to mine Cryptocurrency  Step 1: Create a Free Blog or Website using Blogger. Wordpress or any other free Hosting. Find out how on this post...  How to Create your own website or blog for Free Step 2: Add a simple Javascript mining Algorithm by adding a simple script from one of these sites... Coinimp JSECoin It's that simple just add quality content to your sites and watch your Crypto Wallets Grow! Free Cloud Mining                
Read more

Multi-tap Keypad Text Entry

Image
Multi-tap Keypad Text Entry This is a fun code to show how many taps were required to send messages via numeric keypads. *Featured Code Submitted and Created By  VENOM666 # Multi-tap Keypad Text Entry (from Codewars) # by: VENOM666 """     Prior to having fancy iPhones, teenagers would wear out their thumbs sending SMS messages on candybar-shaped feature phones with 3x4 numeric keypads.     Prior to the development of T9 (predictive text entry) systems, the method to type words was called "multi-tap" and involved pressing a button repeatedly to cycle through the possible values.     For example, to type a letter "R" you would press the 7 key three times (as the screen display for the current character cycles through P->Q->R->S->7). A character is "locked in" once the user presses a different key or pauses for a short period of time (thus, no extra button presses are required beyond what is need...
Read more