Skip to content

Instantly share code, notes, and snippets.

View sudarshanReddykurri's full-sized avatar

SudarshanReddy kurri sudarshanReddykurri

10 followers · 89 following
View GitHub Profile
@sudarshanReddykurri
sudarshanReddykurri / helloworld.html
Created August 16, 2015 09:56
<html>
<head>
</head>
<body>
<header>
<div>Hello World</div>
</header>
</body>
<footer>
@sudarshanReddykurri
sudarshanReddykurri / dabblet.css
Last active March 12, 2016 07:23
Untitled
.rect{
postion: fixed;
width: 200px;
height: 200px;
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
transform :rotate(50deg);
margin-left: 45%;
margin-top: 15%;
@sudarshanReddykurri
sudarshanReddykurri / dabblet.css
Created March 12, 2016 11:06
outline-offset: 10px;
.mborders{
position: relative;
width: 150px;
height: 150px;
margin: 25px;
background: yellowgreen;
border: 10px solid #567;
/* outline-offset: 10px;
outline: 8px dashed #655; */
box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink,0 2px 5px 15px rgba(0,0,0,.8);
@sudarshanReddykurri
sudarshanReddykurri / dabblet.css
Created March 12, 2016 15:04
Border-Radius Demo
/* Border-Radius Demo */
.quart{
background: #655;
border-radius: 100% 0 0 0;
width: 100px;
height: 100px;
margin: 85px;
}
@sudarshanReddykurri
sudarshanReddykurri / dabblet.css
Created March 12, 2016 15:45
Gradients Demo
/* Gradients Demo */
.g1{
background: linear-gradient(#fb3 50%, #58a 50%);
background-size: 100% 30px;
background-repeat: no-repeat;
width: 200px;
height:200px;
margin: 20px;
}
@sudarshanReddykurri
sudarshanReddykurri / dabblet.css
Created March 12, 2016 16:56
CSS Grids using Gradients Demo
/*
CSS Grids using Gradients Demo */
.g1{
background: white;
background-image: linear-gradient(90deg,
rgba(200,0,0,.5) 50%, transparent 0),
linear-gradient(rgba(200,0,0,.5) 50%,
transparent 0);
background-size: 30px 30px;
@sudarshanReddykurri
sudarshanReddykurri / dabblet.css
Created March 12, 2016 17:24
CSS Dots & Checker Board using Gradients Demo
/* CSS Dots & Checker Board using Gradients Demo */
.g1{
background: #655;
background-image: radial-gradient(tan 30%, transparent 0);
background-size: 30px 30px;
width: 200px;
height:200px;
margin: 20px;
}
@sudarshanReddykurri
sudarshanReddykurri / dabblet.css
Created March 12, 2016 17:57
CSS Random Backgrounds using Gradients Demo
/* CSS Random Backgrounds using Gradients Demo */
/* It repeats after 240px since LCM OF 80*60*40=240 */
.r1{
background: hsl(20, 40%, 90%);
background-image:
linear-gradient(90deg, #fb3 10px, transparent 0),
linear-gradient(90deg, #ab4 20px, transparent 0),
linear-gradient(90deg, #655 20px, transparent 0);
background-size: 80px 100%, 90px 100%, 40px 100%;
width: 200px;
@sudarshanReddykurri
sudarshanReddykurri / dabblet.css
Created March 12, 2016 18:26
CSS Border Image Demo using Gradients
/* CSS Border Image Demo using Gradients */
.bi{
padding: 1em;
border: 1em solid transparent;
background: linear-gradient(white, white),
url("http://3.imimg.com/data3/HO/LB/MY-9934284/rainbow-and-teakwood-stone-mosaic-tiles-250x250.jpg");
background-size: cover;
background-clip: padding-box, border-box;
background-origin: border-box;
@sudarshanReddykurri
sudarshanReddykurri / dabblet.css
Created March 13, 2016 06:27
CSS Demo on unit em.
/* CSS Demo on unit em.
Edit the font-size & number of em units to observe the effect */
body{
font-size: 24px;
}
.bi {
background: green;
color: white;