Box Shadow Card ui

HTML

[code language=”html”]

<div class="card shadow1">
<h2>Shadow with 2 properties</h2>
<pre>box-shadow:
0 5px 10px rgba(154,160,185,0.05),
0 15px 40px rgba(166,173,201,0.2);</pre>
</div>

<div class="card shadow2">
<h2>Shadow with 1 property</h2>
<pre>box-shadow:
0 7px 30px <span class="highlight">-10px</span> rgba(150,170,180,0.5);</pre>
</div>

[/code]

CSS

[code language=”css”]

body {
background: #fafafa;
font-family: Arial, sans-serif;
line-height: 1.6;
}

h2 {
margin-top: 0;
}

.card {
padding: 40px;
background: #fff;
max-width: 360px;
border-radius: 20px;
margin: 60px auto;
}

.highlight {
font-weight: bold;
color: #294;
}

.shadow1 {
box-shadow: 0 5px 10px rgba(154,160,185,.05), 0 15px 40px rgba(166,173,201,.2);
}

.shadow2 {
box-shadow: 0 7px 30px -10px rgba(150,170,180,0.5);
}
[/code]

CSS shadow box card Snippet

The post Box Shadow Effect For Card UI appeared first on csshint - A designer hub.

long shadow text

HTML

[code language=”html”]

<canvas class="the-canvas"></canvas>

[/code]

CSS

[code language=”css”]

@import url(‘https://fonts.googleapis.com/css?family=Montserrat:700’);

html, body {
margin: 0px;
width: 100%;
height: 100%;
min-height: 100%;
min-width: 100%;
overflow: hidden;
}

canvas {
width: 100%;
height: 100%;
background: #F3BE4E;
}

[/code]

JS

[code language=”js”]

var canvas = document.querySelector(‘.the-canvas’);
var context = canvas.getContext(‘2d’);
var ratio = window.devicePixelRatio || 1;

var totalLineHeight = 680;
var totalLines = 4;
var totalDiff = totalLineHeight / totalLines;
var fontHeight = 60 * ratio – 50; // Small centering

var smallestWidth = 280; // width of smallest line;
var offsetX = 12;
var offsetY = 6;
var iterations;
var verticalAlign, line1Diff, line2Diff, line3Diff, line4Diff, iterations, iteration, animationFrame;

var startRGB = [255, 255, 255];
var endRGB = [220, 165, 163];
var fullColorSet = [];

init();

function init() {

// Cancel any already running animations
cancelAnimationFrame(animationFrame);

// Set the canvas width and height
canvas.width = window.innerWidth * ratio;
canvas.height = window.innerHeight * ratio;

// Set the canvas font properties
context.font = ‘180px Montserrat’;
context.textAlign = ‘center’;
context.fillStyle = ‘#fff’;
context.strokeStyle = "#F0A5A3";
context.lineWidth = "3";
context.textBaseline = "middle";

// Centering of the text
verticalAlign = (window.innerHeight / 2 * ratio) – totalLineHeight / 2;
line1Diff = totalLineHeight + fontHeight – totalDiff;
line2Diff = totalLineHeight + fontHeight – totalDiff * 2;
line3Diff = totalLineHeight + fontHeight – totalDiff * 3;
line4Diff = totalLineHeight + fontHeight – totalDiff * 4;

// How many iterations will we go through?
iterations = Math.floor(((window.innerWidth * ratio / 2) – (smallestWidth * ratio / 2)) / offsetX + 5);
prepareColorSets(iterations);

iteration = 0;

animationFrame = requestAnimationFrame(draw);
}

// Draw loop
function draw() {

context.clearRect(0, 0, canvas.width, canvas.height);

for( var i = iterations – 1; i > 0; i– ) {
context.fillStyle = ‘rgb(‘ + fullColorSet[i][0] + ‘,’ + fullColorSet[i][1] + ‘,’ + fullColorSet[i][2] + ‘)’;
var x = window.innerWidth / 2 * ratio – i * offsetX;
var y = verticalAlign + i * offsetY + (Math.sin(i + iteration) * 2);
drawText( x, y );
}

iteration += 0.1;
animationFrame = requestAnimationFrame(draw);
}

// Draw the single lines of text.
function drawText(x, y) {

context.fillText("THE ONE", x, y + line4Diff);
context.strokeText("THE ONE", x, y + line4Diff);

context.fillText("YOU ARE", x, y + line3Diff);
context.strokeText("YOU ARE", x, y + line3Diff);

context.fillText("LOOKING FOR", x, y + line2Diff);
context.strokeText("LOOKING FOR", x, y + line2Diff);

context.fillText("IS YOU", x, y + line1Diff);
context.strokeText("IS YOU", x, y + line1Diff);
}

// We do this so we don’t have to calculate these EVERY loop.
function prepareColorSets(iterations) {
fullColorSet = [];
for( var i = 0; i < iterations; i++ ) {
fullColorSet.push(colourGradientor(1 – i / iterations, startRGB, endRGB));
}
}

// THNX – http://stackoverflow.com/questions/14482226/how-can-i-get-the-color-halfway-between-two-colors
function colourGradientor(p, rgb_beginning, rgb_end){

var w = p * 2 – 1;
var w1 = (w + 1) / 2.0;
var w2 = 1 – w1;
var rgb = [parseInt(rgb_beginning[0] * w1 + rgb_end[0] * w2),
parseInt(rgb_beginning[1] * w1 + rgb_end[1] * w2),
parseInt(rgb_beginning[2] * w1 + rgb_end[2] * w2)];
return rgb;
};

window.onresize = init;

[/code]

3D Long shadow Snippet

The post Animated Long Shadow Text Effect appeared first on csshint - A designer hub.