CSS Instagram

Developer
Manz
Size
3,501 Kb
Views
4,048
  1. CSS Instagram Previews
  2. CSS Instagram HTML Codes
  3. CSS Instagram CSS Codes
  4. CSS Instagram JS Codes

How do I make an css instagram?

Instagram Telepero para explicar los filtros de CSS3 en la Tenerife LAN Party 2014. Utilizar con Chrome Beta.. What is a css instagram? How do you make a css instagram? This script and codes were developed by Manz on 18 January 2023, Wednesday.

CSS Instagram Previews
IQ Test

CSS Instagram - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Instagram</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="page"> <h1>CSS Instagram</h1> <div id="filtros"> <p>Elige el filtro deseado:</p> <div></div> </div> <label for="ownenable">Activar filtros propios: <input id="ownenable" type="checkbox" onclick="$('#ownfilter').toggle(); updateImage()" /></label><br /> <img id="imagen" class="Original" src="https://cdn.rawgit.com/ManzDev/cursos-assets/gh-pages/css3/coffee.jpg" /> <div id="ownfilter" style="display:none"> <label for="grayscale">Grayscale: <input id="grayscale" type="range" max="1" min="0" step="0.05" value="0" onChange="updateImage()" /><span></span></label> <label for="sepia">Sepia: <input id="sepia" type="range" max="1" min="0" step="0.05" value="0" onChange="updateImage()" /><span></span></label> <label for="saturate">Saturate: <input id="saturate" type="range" max="1" min="0" step="0.05" value="1" onChange="updateImage()" /><span></span></label> <label for="opacity">Opacity: <input id="opacity" type="range" max="1" min="0" step="0.05" value="1" onChange="updateImage()" /><span></span></label> <label for="brightness">Brightness: <input id="brightness" type="range" max="1" min="0" step="0.05" value="1" onChange="updateImage()" /><span></span></label> <label for="contrast">Contrast: <input id="contrast" type="range" max="1" min="0" step="0.05" value="1" onChange="updateImage()" /><span></span></label> <label for="invert">Invert: <input id="invert" type="range" max="1" min="0" step="0.05" value="0" onChange="updateImage()" /><span></span></label> <label for="blur">Blur: <input id="blur" type="range" max="100" min="0" value="0" onChange="updateImage()" /><span></span></label> <label for="hue-rotate">Hue-rotate: <input id="hue-rotate" type="range" max="360" min="0" value="0" onChange="updateImage()" /><span></span></label> </div> </div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

CSS Instagram - Script Codes CSS Codes

/* Reset spaces */
html, body { margin:0; padding:0;
}
/* Set global font */
p, label { font-family:'Open Sans', sans-serif;
}
p { font-size:18px }
label { font-size:12px }
/* Header */
h1 { font-family: 'Open Sans'; letter-spacing:-1px; color:#FFF; background:#000; padding:5px 0; margin:0; width:100%;
}
/* Center page */
#page { margin:0 auto; text-align:center;
}
/* Mini-filter squares */
#filtros { margin-top:1em; height:150px;
} /* Hidden radio check */ #filtros input { display:none } /* Square style */ #filtros label { border:2px solid #666; width:85px; height:85px; display:inline-block; margin-right:4px; background:#6C6C6C; color:#444; font-weight:bold; cursor:pointer; transition:all ease 0.5s; } /* Square mouse hover */ #filtros label:hover { /*background:#840f0f;*/ background: #6C6C6C url(https://i.imgur.com/hUZHfH1.png) 0 -6px; border:2px solid #333; transition:all ease 0.5s; border-bottom:8px solid #333; color:#FFF; }
/* Photography */
#imagen { margin-top:2em; transition:all ease-in 1s;
}
/* Create my own filters */
#ownfilter { margin:1em 0; background:#FFF; border:1px solid #999; border-radius:15px; padding:15px; position:absolute; top:1em; left:1em;
} #ownfilter label { display:block; padding:0.2em 0.6em; font-weight:bold; }
/*** Filters ***/
/* Original filter (without effects) */
.Original { border:15px solid #FFF;
}
/* Kalvin Filter */
.Kalvin { -webkit-filter: hue-rotate(175deg); -moz-filter: hue-rotate(175deg); filter: hue-rotate(175deg); border:15px solid #FFF; box-shadow: 2px 4px 10px 3px #999;
}
/* GreenLantern Filter */
.GreenLantern { -webkit-filter: hue-rotate(75deg); -moz-filter: hue-rotate(75deg); filter: hue-rotate(75deg); border:15px solid #000;
}
/* Gray Filter */
.Gray { -webkit-filter: saturate(0); border:15px solid #333; border-radius:15px;
}
/* Hipster Filter */
.Hipster { -webkit-filter: contrast(1) brightness(0.75) blur(1px); border:15px dotted #333;
}
/* Sepia Filter */
.Sepia { -webkit-filter: sepia(1); border:15px solid #FFF;
}
/* Blend Filter */
.Blend { mix-blend-mode: multiply; border:15px solid #555;
}

CSS Instagram - Script Codes JS Codes

$( document ).ready(function() { for (i=0;i<filtros.length;i++) $('#filtros div').append('<label for="'+filtros[i]+'">'+filtros[i]+'<input type="radio" name="filter" onClick="setFilter(this.id)" id="'+filtros[i]+'" /></label>');
});
// Add filter here (Be careful with lowercase/uppercase!)
filtros = ["Original", "Kalvin", "Gray", "GreenLantern", "Hipster", "Sepia", "Blend"];
function setFilter(name) { $('#imagen').attr('class', name);
}
function updateOwnFilter() { var ownFilters = ''; // Filters inputs = $('#ownfilter input'); for (i = 0; i < inputs.length - 2; i++) { ownFilters += inputs[i].id+'('+inputs[i].value+') '; } ownFilters += inputs[7].id+'('+inputs[7].value+'px) '; ownFilters += inputs[8].id+'('+inputs[8].value+'deg)'; // Unit field spans = $('#ownfilter span'); for (i = 0; i < inputs.length - 2; i++) { spans[i].innerHTML = inputs[i].value; } spans[7].innerHTML = inputs[7].value + 'px'; spans[8].innerHTML = inputs[8].value + 'deg'; // Update $('#imagen').css('-webkit-filter', ownFilters);
}
function updateImage() { if ($('input#ownenable').prop('checked')) { updateOwnFilter(); $('#imagen').css('transition', 'none'); } else { $('#imagen').css('transition', 'all ease-in 1s'); $('#imagen').css('-webkit-filter', ''); }
}
CSS Instagram - Script Codes
CSS Instagram - Script Codes
Home Page Home
Developer Manz
Username manz
Uploaded January 18, 2023
Rating 3
Size 3,501 Kb
Views 4,048
Do you need developer help for CSS Instagram?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Manz (manz) Script Codes
Name
Earth Animation CSS
Camera Snapshot Emulator
Fallout 4 - Logo screen
JS Keyboard Keycodes
Monkey Island CSS Animation
A Pen by Manz
Battery API JS
CSS Shine logo
Space Invaders SVG icon
Chuck Norris Background
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!