How can I make this cover look like a book?

How can I make this cover look like a book? - css

I liked this book design in iBooks and have been wondering can it be easily made with css?
Original photo

have you tried gradients and shadows ?
.cover {
background: linear-gradient(to right, rgb(60, 13, 20) 3px, rgba(255, 255, 255, 0.5) 5px, rgba(255, 255, 255, 0.25) 7px, rgba(255, 255, 255, 0.25) 10px, transparent 12px, transparent 16px, rgba(255, 255, 255, 0.25) 17px, transparent 22px), url(https://images-na.ssl-images-amazon.com/images/I/51pnouuPO5L.jpg);
box-shadow: 0 0 5px -1px black, inset -1px 1px 2px rgba(255, 255, 255, 0.5);
margin: auto;
border-radius: 5px;
width: 389px;
height: 500px;
}
body {
min-height: 100vh;
display: flex;
}
<div title=" Don't make me think " class="cover"></div>

I think this could be pretty easily done with gradients in CSS. Here's a (very rough) example fiddle: https://jsfiddle.net/6yok9c4w/
HTML:
<div class="overlay">
</div>
<img src="https://images-na.ssl-images-amazon.com/images/I/51pnouuPO5L.jpg" />
CSS:
.overlay {
width: 400px;
height: 500px;
position: fixed;
top: 0;
left: 0;
background: linear-gradient(90deg, rgba(2,0,36,.5) 0%, rgba(0,0,0,.5) 2%, rgba(255,255,255,.5) 3%, rgba(247,254,255,.5) 5%, rgba(0,0,0,.5) 7%, rgba(255,255,255,.5) 13%, rgba(255,255,255,.2) 100%);
}
img {
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
I used this tool to generate the gradient: https://cssgradient.io/
With more effort and tweaking, I think you can get really close to the original.

Related

How to create a dashed border with two alternating colours?

Is there a way to create a dashed border with two alternating colours in CSS?
.twoColourBorder {
border: 2px dashed red, blue;
}
Edit 1
Perhaps stacked dashed borders (white, red, white, blue)?
Edit 2
Ideally not; however, should I consider a border img?
Edit 3
Leaning toward a gradient solution. Still struggling though.
Edit 4
Dylan pointed out below that perhaps stroke-dasharray could work. On it.

Built on Yadab's answer, adding a pseudo element to fix the vertical border.
Basically you create a line with repeating-linear-gradient and set it to border-image.
:root {
--border-size: 2px;
--box-width: 36em;
--box-height: 8em;
--dash-size: 1em;
}
.box,
.box::after {
height: var(--box-height);
width: var(--box-width);
border: solid;
}
.box {
border-image: repeating-linear-gradient( to right, red 0, red var(--dash-size), transparent var(--dash-size), transparent calc(var(--dash-size) * 2), blue calc(var(--dash-size) * 2), blue calc(var(--dash-size) * 3), transparent calc(var(--dash-size) * 3), transparent calc(var(--dash-size) * 4));
border-image-slice: 16;
border-image-width: var(--border-size) 0;
}
.box::after {
content: "";
top: 0;
position: absolute;
border-image: repeating-linear-gradient( to bottom, blue 0, blue var(--dash-size), transparent var(--dash-size), transparent calc(var(--dash-size) * 2), red calc(var(--dash-size) * 2), red calc(var(--dash-size) * 3), transparent calc(var(--dash-size) * 3), transparent calc(var(--dash-size) * 4));
border-image-slice: 16;
border-image-width: 0 var(--border-size);
}
<div class="box"></div>

.boxborder-me {
box-shadow: 0 0 0 5px red;
outline: dashed 5px blue;
height: 100px;
}
<div class="boxborder-me"></div>

This should help you.
.box {
padding: 1rem;
border: 5px solid transparent;
border-image: 16 repeating-linear-gradient(-45deg, red 0, red 1em, transparent 0, transparent 2em,
#58a 0, #58a 3em, transparent 0, transparent 4em);
max-width: 20em;
font: 100%/1.6 Baskerville, Palatino, serif;
}
<div class="box" />

I know it isn't perfect and a better answer most definitely exists! (I am strapped for time to answer this) Treat this more a proof of concept that you can get the look your after by using the following:
#multiColor {
height: 100px;
width: 340px;
border: solid 5px;
border-image: url('../../../assets/images/border.png') 10 / 10px round;
}
Here is the image I edited in photoshop:
EDIT
After more research I started researching svg stroke-dasharray and have come up with something that might help us get to a final solution:
https://jsfiddle.net/wtcmpx98/52/
<svg viewbox="0 0 200 150" xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect class="red"/>
<rect class="blue"/>
<rect class="white"/>
<!--<rect class="white-2"/>-->
</svg>
svg {
top: 10px;
left: 10px;
fill: none;
width: 500px;
height: 500px;
}
.red,
.blue,
.white {
x: 10px;
y: 10px;
height: 150px;
width: 150px;
}
.red {
stroke: red;
stroke-width: 5;
stroke-dasharray: 0,0,0;
}
.white {
stroke: white;
stroke-width: 6px;
stroke-dasharray: 5,5,5;
}
.blue {
stroke: blue;
stroke-width: 5;
stroke-dasharray: 10,10,10;
}
.white-2 {
stroke: white;
stroke-width: 6px;
stroke-dasharray: 15,15,15;
}

The following demo uses background: linear-gradient() on a total of 16 <div> positioned absolute within a relatively positioned <div>. It's a little rough -- the corners are not perfect when resized.
Demo
Drag the bottom right corner of rectangle to resize
* {
padding: 0;
margin: 0;
}
.box {
position: relative;
width: 30vw;
height: 50vh;
padding: 4px;
margin: 25vh auto;
resize: both;
overflow: auto;
}
.box div {
position: absolute;
}
.n {
width: 25%;
height: 4px;
background: linear-gradient(to right, rgba(255, 0, 0, 1) 0%, rgba(255, 0, 0, 1)33%, rgba(255, 255, 255, 1) 33%, rgba(255, 255, 255, 1) 66%, rgba(0, 0, 255, 1) 66%, rgba(0, 0, 255, 1) 100%) repeat 10% 100%;
top: 0;
}
.e {
width: 4px;
height: 25%;
background: linear-gradient(to bottom, rgba(255, 0, 0, 1) 0%, rgba(255, 0, 0, 1)33%, rgba(255, 255, 255, 1) 33%, rgba(255, 255, 255, 1) 66%, rgba(0, 0, 255, 1) 66%, rgba(0, 0, 255, 1) 100%) repeat 100% 10%;
right: 0;
}
.s {
width: 25%;
height: 4px;
background: linear-gradient(to left, rgba(255, 0, 0, 1) 0%, rgba(255, 0, 0, 1)33%, rgba(255, 255, 255, 1) 33%, rgba(255, 255, 255, 1) 66%, rgba(0, 0, 255, 1) 66%, rgba(0, 0, 255, 1) 100%) repeat 10% 100%;
bottom: 0;
}
.w {
width: 4px;
height: 25%;
background: linear-gradient(to top, rgba(255, 0, 0, 1) 0%, rgba(255, 0, 0, 1)33%, rgba(255, 255, 255, 1) 33%, rgba(255, 255, 255, 1) 66%, rgba(0, 0, 255, 1) 66%, rgba(0, 0, 255, 1) 100%);
left: 0;
}
.r1 {
right: 0
}
.r2 {
right: 25%
}
.r3 {
right: 50%
}
.r4 {
right: 75%
}
.b1 {
bottom: 0
}
.b2 {
bottom: 25%
}
.b3 {
bottom: 50%
}
.b4 {
bottom: 75%
}
.l1 {
left: 0
}
.l2 {
left: 25%
}
.l3 {
left: 50%
}
.l4 {
left: 75%
}
.t1 {
top: 0
}
.t2 {
top: 25%
}
.t3 {
top: 50%
}
.t4 {
top: 75%
}
<div class='box'>
<div class='n r1'></div>
<div class='n r2'></div>
<div class='n r3'></div>
<div class='n r4'></div>
<div class='e b1'></div>
<div class='e b2'></div>
<div class='e b3'></div>
<div class='e b4'></div>
<div class='s l1'></div>
<div class='s l2'></div>
<div class='s l3'></div>
<div class='s l4'></div>
<div class='w t1'></div>
<div class='w t2'></div>
<div class='w t3'></div>
<div class='w t4'></div>
</div>

CSS radial gradients rule applies to all browsers but Firefox

I am applying this CSS rule to some divs on a web application. Basically I need to display a border around the div, but without using the border property.
It works on every browser but Firefox. Can anyone help me understand what I'm doing wrong?
div {
margin: 20px;
width: 100px;
height: 100px;
background-color: #F8F9FA;
background-image: radial-gradient(#dedede 1px, rgba(255, 255, 255, 0) 1px), radial-gradient(#dedede 1px, rgba(255, 255, 255, 0) 1px), radial-gradient(#dedede 1px, rgba(255, 255, 255, 0) 1px), radial-gradient(#dedede 1px, rgba(255, 255, 255, 0) 1px);
background-image: -moz-radial-gradient(#dedede 1px, rgba(255, 255, 255, 0) 1px), -moz-radial-gradient(#dedede 1px, rgba(255, 255, 255, 0) 1px), -moz-radial-gradient(#dedede 1px, rgba(255, 255, 255, 0) 1px), -moz-radial-gradient(#dedede 1px, rgba(255, 255, 255, 0) 1px);
background-position: top, right, bottom, left;
background-size: 1px 1px, 1px 1px;
background-repeat: repeat-x, repeat-y;
}
<div></div>
https://jsfiddle.net/za74L1st/1/
Many thanks!

This a job for linear-gradient not radial-gradient.
.box {
margin: 20px;
width: 100px;
height: 100px;
background-color: #F8F9FA;
background-image:
linear-gradient(#dedede,#dedede),
linear-gradient(#dedede,#dedede),
linear-gradient(#dedede,#dedede),
linear-gradient(#dedede,#dedede);
background-position: top, right, bottom, left;
background-size: 100% 1px,1px 100%;
background-repeat: no-repeat;
}
<div class="box"></div>
You are for sure facing subpixel rendring issue since you are defining very small circles having less than 1px radius. If you increase the values you will see something on Firefox:
.box {
margin: 20px;
width: 100px;
height: 100px;
background-color: #F8F9FA;
background-image:
/* doesn't matter what you put here as value since the background-size is already small */
radial-gradient(#dedede 51px, transparent 51px),
radial-gradient(#dedede 50px, transparent 50px),
radial-gradient(#dedede 99px, transparent 5px),
radial-gradient(#dedede 54px, transparent 54px);
background-position: top, right, bottom, left;
background-size: 1px 1px;
background-repeat: repeat-x, repeat-y;
}
<div class="box"></div>

How to increase the size of square/circle blocks in progress bar? Increasing width, height isn't working

I have tried updating border-radius to make square from circle but size is very small. I want to increase size of each square. Width & Height changes aren't making any difference.
If someone can help in making it usable or provide similar code with big boxes.
Let me know if any further details needed.
#-webkit-keyframes myanimation {
from {
left: 0%;
}
to {
left: 100%;
}
}
h1 {
text-align: center;
font-family: 'PT Sans Caption', sans-serif;
font-weight: 400;
font-size: 20px;
padding: 20px 0;
color: #777;
}
.checkout-wrap {
color: #444;
font-family: 'PT Sans Caption', sans-serif;
margin: 40px auto;
max-width: 1200px;
position: relative;
}
ul.checkout-bar li {
color: #ccc;
display: block;
font-size: 16px;
font-weight: 600;
padding: 14px 20px 14px 80px;
position: relative;
}
ul.checkout-bar li:before {
-webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
background: #ddd;
border: 2px solid #FFF;
border-radius: 20%;
color: #fff;
font-size: 16px;
font-weight: 700;
left: 20px;
line-height: 37px;
height: 35px;
position: absolute;
text-align: center;
text-shadow: 1px 1px rgba(0, 0, 0, 0.2);
top: 4px;
width: 35px;
z-index: 999;
}
ul.checkout-bar li.active {
color: #8bc53f;
font-weight: bold;
}
ul.checkout-bar li.active:before {
background: #8bc53f;
z-index: 99999;
}
ul.checkout-bar li.visited {
background: #ECECEC;
color: #57aed1;
z-index: 99999;
}
ul.checkout-bar li.visited:before {
background: #57aed1;
z-index: 99999;
}
ul.checkout-bar li:nth-child(1):before {
content: "1";
}
ul.checkout-bar li:nth-child(2):before {
content: "2";
}
ul.checkout-bar li:nth-child(3):before {
content: "3";
}
ul.checkout-bar li:nth-child(4):before {
content: "4";
}
ul.checkout-bar li:nth-child(5):before {
content: "5";
}
ul.checkout-bar li:nth-child(6):before {
content: "6";
}
ul.checkout-bar a {
color: #57aed1;
font-size: 16px;
font-weight: 600;
text-decoration: none;
}
#media all and (min-width: 800px) {
.checkout-bar li.active:after {
-webkit-animation: myanimation 3s 0;
background-size: 35px 35px;
background-color: #8bc53f;
background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
-webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
content: "";
height: 15px;
width: 100%;
left: 50%;
position: absolute;
top: -50px;
z-index: 0;
}
.checkout-wrap {
margin: 80px auto;
}
ul.checkout-bar {
-webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
background-size: 35px 35px;
background-color: #EcEcEc;
background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent);
border-radius: 15px;
height: 15px;
margin: 0 auto;
padding: 0;
position: absolute;
width: 100%;
}
ul.checkout-bar:before {
background-size: 35px 35px;
background-color: #57aed1;
background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
-webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
border-radius: 15px;
content: " ";
height: 15px;
left: 0;
position: absolute;
width: 10%;
}
ul.checkout-bar li {
display: inline-block;
margin: 50px 0 0;
padding: 0;
text-align: center;
width: 19%;
}
ul.checkout-bar li:before {
height: 45px;
left: 40%;
line-height: 45px;
position: absolute;
top: -65px;
width: 45px;
z-index: 99;
}
ul.checkout-bar li.visited {
background: none;
}
ul.checkout-bar li.visited:after {
background-size: 35px 35px;
background-color: #57aed1;
background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
-webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
content: "";
height: 15px;
left: 50%;
position: absolute;
top: -50px;
width: 100%;
z-index: 99;
}
}
<head>
<meta charset="UTF-8"/>
<title>Responsive Checkout Progress Bar</title>
</head>
<body>
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Caption:400,700' rel='stylesheet' type='text/css'/>
<h1>Responsive Checkout Progress Bar</h1>
<div class="checkout-wrap">
<ul class="checkout-bar">
<li class="visited first">Possible candidate</li>
<li class="previous visited">Forwarded to manager</li>
<li class="active">Phone screen</li>
<li class="next">Interview</li>
<li class="">Complete</li>
<li class="">Cancelled</li>
</ul>
</div>
</body>

Let's take a look at the rules, you will find the following rule:
ul.checkout-bar li:before {
-webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
background: #ddd;
border: 2px solid #FFF;
border-radius: 20%;
color: #fff;
font-size: 16px;
font-weight: 700;
left: 20px;
line-height: 37px;
height: 35px;
position: absolute;
text-align: center;
text-shadow: 1px 1px rgba(0, 0, 0, 0.2);
top: 4px;
width: 35px;
z-index: 999;
}
If you change width and height of the previous rule nothing will happen if
it is displayed on a browser because you have another rule for the same selector inside a media query that is to be applied on screens with a width greater than 800px :
#media all and (min-width: 800px) {
...
ul.checkout-bar li:before {
height: 45px;
left: 40%;
line-height: 45px;
position: absolute;
top: -65px;
width: 45px;
z-index: 99;
}
...
}
The last rule is overriding the first rule because is inside a media query and you are probably displaying the file in a browser that is more than 800px. If you change the height and width of the second rule you'll see the changes. If the file is displayed in a the device with width lower than 800px then you the rule that will have effect is the first one.
I suggest you learn about media queries and to learn about using Developer Tools to debug code.

On small screen you need to adjust your #media all and (min-width: 800px) { ... ul.checkout-bar li:before ... } class's properties and on large screen you need to adjust ul.checkout-bar li:before,
properties that you need to adjust are: height, width, line-height, top
#-webkit-keyframes myanimation {
from {
left: 0%;
}
to {
left: 100%;
}
}
h1 {
text-align: center;
font-family: 'PT Sans Caption', sans-serif;
font-weight: 400;
font-size: 20px;
padding: 20px 0;
color: #777;
}
.checkout-wrap {
color: #444;
font-family: 'PT Sans Caption', sans-serif;
margin: 40px auto;
max-width: 1200px;
position: relative;
}
ul.checkout-bar li {
color: #ccc;
display: block;
font-size: 16px;
font-weight: 600;
padding: 14px 20px 14px 80px;
position: relative;
margin-top: 26px;
}
ul.checkout-bar li:before {
-webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
background: #ddd;
border: 2px solid #FFF;
border-radius: 20%;
color: #fff;
font-size: 16px;
font-weight: 700;
left: 0px;
line-height: 70px;
height: 70px;
position: absolute;
text-align: center;
text-shadow: 1px 1px rgba(0, 0, 0, 0.2);
top: -80px;
width: 70px;
z-index: 999;
}
ul.checkout-bar li.active {
color: #8bc53f;
font-weight: bold;
}
ul.checkout-bar li.active:before {
background: #8bc53f;
z-index: 99999;
}
ul.checkout-bar li.visited {
background: #ECECEC;
color: #57aed1;
z-index: 99999;
}
ul.checkout-bar li.visited:before {
background: #57aed1;
z-index: 99999;
}
ul.checkout-bar li:nth-child(1):before {
content: "1";
}
ul.checkout-bar li:nth-child(2):before {
content: "2";
}
ul.checkout-bar li:nth-child(3):before {
content: "3";
}
ul.checkout-bar li:nth-child(4):before {
content: "4";
}
ul.checkout-bar li:nth-child(5):before {
content: "5";
}
ul.checkout-bar li:nth-child(6):before {
content: "6";
}
ul.checkout-bar a {
color: #57aed1;
font-size: 16px;
font-weight: 600;
text-decoration: none;
}
#media all and (min-width: 800px) {
.checkout-bar li.active:after {
-webkit-animation: myanimation 3s 0;
background-size: 35px 35px;
background-color: #8bc53f;
background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
-webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
content: "";
height: 15px;
width: 100%;
left: 50%;
position: absolute;
top: -50px;
z-index: 0;
}
.checkout-wrap {
margin: 80px auto;
}
ul.checkout-bar {
-webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
background-size: 35px 35px;
background-color: #EcEcEc;
background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent);
border-radius: 15px;
height: 15px;
margin: 0 auto;
padding: 0;
position: absolute;
width: 100%;
}
ul.checkout-bar:before {
background-size: 35px 35px;
background-color: #57aed1;
background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
-webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
border-radius: 15px;
content: " ";
height: 15px;
left: 0;
position: absolute;
width: 10%;
}
ul.checkout-bar li {
display: inline-block;
margin: 50px 0 0;
padding: 0;
text-align: center;
width: 19%;
}
ul.checkout-bar li:before {
height: 70px;
left: 40%;
line-height: 70px;
position: absolute;
top: -80px;
width: 70px;
z-index: 99;
}
ul.checkout-bar li.visited {
background: none;
}
ul.checkout-bar li.visited:after {
background-size: 35px 35px;
background-color: #57aed1;
background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
-webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
content: "";
height: 15px;
left: 50%;
position: absolute;
top: -50px;
width: 100%;
z-index: 99;
}
}
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Caption:400,700' rel='stylesheet' type='text/css'/>
<h1>Responsive Checkout Progress Bar</h1>
<div class="checkout-wrap">
<ul class="checkout-bar">
<li class="visited first">Possible candidate</li>
<li class="previous visited">Forwarded to manager</li>
<li class="active">Phone screen</li>
<li class="next">Interview</li>
<li class="">Complete</li>
<li class="">Cancelled</li>
</ul>
</div>

sass border with 3 colors, is possible?

So, I'm trying to create an border of 1px, with a color 30% green, 20% red, 27% blue, with 70% of opacity, it is possible? I'm using sass but I have not found a way to make this
.box
width: 100px
height: 100px
background: gray
margin: 50px auto 0 auto
border-color: #ff0000 #0000ff
My pen: http://codepen.io/mejingjard/pen/xwxLKO?editors=110

Yes it's possible, and it's actually really simple with rgba()
border-color: rgba(20%,30%,27%,0.7);
Read about this and more sass color functions at
http://sass-lang.com/documentation/Sass/Script/Functions.html#rgba-instance_method

You can give this a try, however this alternative is with four borders, not the three. With RGBA you can change the opacity. You can visit http://www.cssportal.com/css3-rgba-generator/ to generate the CSS3 RGBA colours; there you can also change the opacity.
div {
width: 100px;
height: 100px;
margin: auto;
}
.one {
border-top: 1px solid rgba(0, 255, 0, 0.7);
border-right: 1px solid rgba(255, 0, 0, 0.7);
border-bottom: 1px solid rgba(0, 0, 255, 0.7);
border-left: 1px solid rgba(255, 0, 0, .5);
<div class="one"></div>
Alternatively if you wanted to go for more of a gradient look you can try applying a CSS3 gradient within a pseudo-element, however only two border colors are adopted, and it's without the opacity.
.one{
margin: auto;
width: 100px;
height: 100px;
border: 1px solid transparent;
-moz-border-image: -moz-linear-gradient(top, #E93478 0%, #FF0 100%);
-webkit-border-image: -webkit-linear-gradient(top, #E93478 0%, #FF0 100%);
border-image: linear-gradient(to bottom, #E93478 0%, #FF0 100%);
border-image-slice: 1;}
<div class="one"></div>

CSS3 Background Plus Transparency Without Images

I have a solid background color on a button, and I'm looking for some CSS(3?) that would overlay a semi-transparent white on top of the color, but only on the top 50% of it. I'm looking for a non-gradient, non-image-based shine effect.
How can this be accomplished without using an image? It's ok if the solution doesn't support older browsers.
EDIT: bookcasey's answer below seems to work except the font is also made transparent...
<!DOCTYPE html>
<html>
<head>
<style>
a
{
display: inline-block;
padding:30px;
background: salmon;
position: relative;
text-align: center;
text-decoration:none;
color:#000;
font-size:20pt;
font-weight:bold;
}
a:before
{
content: '';
width: 100%;
height: 50%;
background: rgba(255,255,255,0.5);
position: absolute;
top: 0;
left:0;
}
</style>
</html>
<body>
<div>
Test Link
</div>
</body>
</html>
Thanks,
Andy

Use an absolutely positioned pseudo element on a relative parent.
Demo
a {display: block; width: 100px; height: 50px; background: salmon; position: relative;}
a:before {
content: '';
width: 100%;
height: 50%;
background: rgba(255,255,255,.5);
position: absolute;
top: 0;
left:0;
}

Another, completely different technique (mentioned, but not explained in the comments) is the use of CSS3 gradients with a hard color stop.
a {display: block; width: 100px; height: 50px; position: relative;
background: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(50%, rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, 0.5))), salmon;
background: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.5) 50%), salmon;
background: -moz-linear-gradient(bottom, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.5) 50%), salmon;
background: -o-linear-gradient(bottom, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.5) 50%), salmon;
background: linear-gradient(bottom, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.5) 50%), salmon;}
Demo

Develop Reference

r css asp.net wordpress firebase qt symfony nginx http apache-flex

How can I make this cover look like a book? - css

I liked this book design in iBooks and have been wondering can it be easily made with css? Original photo

Related

How to create a dashed border with two alternating colours?

CSS radial gradients rule applies to all browsers but Firefox

How to increase the size of square/circle blocks in progress bar? Increasing width, height isn't working

sass border with 3 colors, is possible?

CSS3 Background Plus Transparency Without Images

Categories

Resources