I would like insight as to whether or not it is possible to develop a border pattern like the one displayed here through CSS code. I've considered making the pattern through a Photoshop-like program and then setting the background of the border to the url of the photoshop-made pattern. How I run into browser compatibility issues if I wish to pursue this through coding?
Able to make a pretty similar border using straight css.
First, in before, generated a box with 3 striped lines- one red, one blue, one beige. Also added the beige border to this.
Then, in the :after pseudo element, just gave the box a beige background (probably could look better with a gradient background too).
Check it out:
<!DOCTYPE html>
<html>
<head>
<style>
p.box:before{
content: '';
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
background:repeating-linear-gradient(
45deg,
hsl(60, 56%, 81%) 0px,
hsl(60, 56%, 81%) 4px,
red 5px,
red 14px,
hsl(60, 56%, 81%) 15px,
hsl(60, 56%, 81%) 20px,
hsla(247, 83%, 37%, 1) 21px,
hsla(247, 83%, 37%, 1) 30px
),
linear-gradient(
to bottom,
rgba(48, 26, 255, 1),
rgba(85, 66, 255, 1)
);
border: 5px solid hsl(60, 56%, 81%);
}
p.box:after{
content: '';
position: absolute;
right: -.5%;
bottom: -2.5%;
background: hsl(60, 56%, 81%);
z-index: -1;
height: 97%;
width: 97%;
}
</style>
</head>
<body>
<p class="box"></p>
</body>
</html>
Related
I would like to achieve the following effect in a div box. What CSS would do the trick? Thank you in advance for your answers!
Using the linear-gradient function in CSS3, the code will be +- like this:
.box{
height: 100px;
width: 100px;
background: linear-gradient(to top, blue, white, blue)
}
as stated in the first answer, use css gradients, and combine with border-radius for your rounded corners.
.box{
height: 200px;
width: 150px;
background: linear-gradient(to top, #4690ff, #ffffff, #4690ff);
border-radius:15px 0px 0px 15px;
}
<div class="box"></div>
You can use CSS3 with linear gradient. Something like this:
.demo {
width: 150px;
height: 150px;
}
.gradient {
background: #508cf4; /* Old browsers for fallback */
background: linear-gradient(to bottom, #508cf4 0%, #ffffff 50%, #508cf4 100%);
}
<div class="gradient demo"></div>
You could also google for "css3 gradient generator" to have a GUI. For example cssgradient.io
You might test run a few css gradient tools like ColorZilla and GradientFinder to work with gradient colors.
Also, by combining a low opacity radial gradient with a linear gradient you can get a more rich look that might get closer to your original image.
.box {
display: block;
width: 182px;
height: 229px;
background:
radial-gradient(ellipse at center, rgba(252,253,255,.2) 54%,rgba(212,229,255,.2) 66%,rgba(212,229,255,.2) 66%,rgba(153,193,255,.2) 79%,rgba(153,193,255,.2) 79%,rgba(57,136,255,.2) 100%),
linear-gradient(to top, rgb(57, 136, 255) 0%, rgb(153, 193, 255) 13%, rgb(212, 229, 255) 23%, rgb(252, 253, 255) 43%, rgb(252, 253, 255) 57%, rgb(212, 229, 255) 77%, rgb(153, 193, 255) 87%, rgb(57, 136, 255) 100%);
border-radius: 16px 0 0 16px;
}
<div class="box"></div>
<p>original <img src="https://i.stack.imgur.com/OJ5Z6.png" /></p>
I'm looking to create a yellow div with wide left and right borders. Towards the outside edges of the div, the left and right borders taper in colour down to white to simulate transparency.
So far I've been able to construct the div, but not the gradient:
.fade {
margin: 2em 2em; padding-top: 2em; padding-bottom: 2em;
background: rgb(242,242,194);
border-right: 3em black solid;
border-left: 3em black solid;
border-image: linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(242, 242, 194) 100%);
{
<div class="fade">Text</div>
What happens can be seen above: the linear gradient correctly overrides the black to make a yellow border, but there's no fade to white that I'm looking for. There's no gradient at all, in fact.
The final product should look like this:
Where am I going wrong?
If you aren't familiar with gradients and you don't want to mess with them you should use Colorzilla gradient tool: http://www.colorzilla.com/gradient-editor/
.fade {
margin: 2em 2em; padding-top: 2em; padding-bottom: 2em;
background: linear-gradient(90deg, white 0%, rgb(242, 242, 194) 5%, rgb(242, 242, 194) 95%, white 100%);
}
<div class="fade">Text</div>
Maybe something like this can be useful?
I will explain what I did.
I deleted every attribute that contains border and I only used background.
background: linear-gradient(90deg, white 0%, rgb(242, 242, 194) 5%, rgb(242, 242, 194) 95%, white 100%);
This gradient has 4 steps:
The first step tells that the gradient has to start in white.
The second step (5% of the width of the element) tells that the gradient follows yellow.
Until third step (95% of the width of the element).
Then, in fourth step it ends with white again.
Note that this percentages are for the width because you have rotated the gradient 90 degrees, with 0 or 360 you will affect the height part of the gradient.
A last detail, you will need some padding inside the div to make the text looks exactly like your photo.
div {
background: linear-gradient(90deg, white 0%, rgb(242, 242, 194) 8%, rgb(242, 242, 194) 92%, white 100%);
padding: 15px;
margin: 30px;
}
p {
padding-left: 50px;
}
<div><p>Text</p></div>
I'm trying to create a bootstrap navbar that has the top half in a certain color with 0.9 opacity and a background-image behind it, and the bottom half with complete transparency (opacity 0) just showing the body's color/background-image.
I've been playing for hours now with linear gradients trying to achieve the effect, but the closest I've got is...
html, body {
height: 100%;
background-image: url("/someBackgroundTexture.png");
}
.theNavBar {
background-image:
linear-gradient(
to bottom,
rgba(127, 180, 220, 0.9) 0%, /*opacity 0.9*/
rgba(127, 180, 220, 0.9) 50%, /*opacity 0.9*/
rgba(0, 0, 0, 0) 50%, /*transparent*/
rgba(0, 0, 0, 0) 100% /*transparent*/
)
,url("/someNavbarTexture.png");
height: 100%;
width: 100%;
}
It works well in terms of dividing the navbar into 2 pieces with different colors, but the problem is that "someNavbarTexture.png" is applied in the wrong half (the bottom half of the navbar), and is effectively just doing the same job that the background-image of html,body is.
What I want to do is somehow assign the ",url("/someNavbarTexture.png");" to the first 2 rows of the linear-gradient (which seems impossible).
Is there any easier way to achieve this effect with CSS? (I really don't care if I end up using linear-gradients or not!) Thanks for any thoughts at all.
--------EDIT---------
Here's a link explaining what I'm talking about...
http://codepen.io/d3wannabe/pen/gPPmOv
The only way I can see of doing this is with a pseudo-element (or div if you wish) that is absolutely positioned and is 50% of the container height.
/* Pen-specific styles */
html,
body {
height: 100%;
margin: 0;
}
/* Pattern styles */
.container {
background-image: linear-gradient(to bottom, rgba(127, 180, 220, 0.9) 0%, rgba(127, 180, 220, 0.9) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
height: 100%;
width: 100%;
position: relative;
}
.container:before {
content: '';
position: absolute;
width: 100%;
height: 50%;
background-image: url("http://www.transparenttextures.com/patterns/3px-tile.png");
z-index: -1;
}
<section class="container">
</div>
I've tried numerous ways using linear-gradients to create several stripes layered on top of each other and have gotten very close but seem to be stuck on the top face. I'm trying to accomplish this using gradients be it linear or radial so that I can eventually upgrade them to repeating gradients and have a nice background of cubes. I'm applying css to an empty body tag. I think it might actually be impossible, somebody please prove me wrong! This is the perspective i was going for:
/ \
|\ /|
| | |
\ /
I used the before and after pseudo-element to get the 3D cube effect. Here is the code:
<!doctype html>
<html>
<head>
<style>
div {
width:100px;
height:100px;
-webkit-transform: rotateX(45deg) rotateY(0deg) rotateZ(45deg);
margin: 20px;
background: red;
}
div::before {
display: block;
content: '';
position: absolute;
width: 71px;
height: 102px;
background: green;
-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(-45deg) translateX(-24px) translateY(96px) skewY(45deg);
}
div::after {
display: block;
content: '';
position: absolute;
width: 72px;
height: 100px;
background: blue;
-webkit-transform: rotateX(0) rotateY(0deg) rotateZ(0deg) translateX(100px) translateY(36px) skewY(45deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Welp, i fingered it out myself!
#cube
{
width:500px;
height:150px;
background:
linear-gradient(45deg,
black 0%,
black 43%,
transparent 43%,
transparent 60%,
black 60%,
black 100%
),
linear-gradient(-45deg,
black 0%,
black 43%,
transparent 43%,
transparent 60%,
black 60%,
black 100%
),
linear-gradient(90deg,
black 0%,
black 44%,
transparent 44%,
transparent 56.5%,
black 56.5%,
black 100%
),
linear-gradient(45deg,
transparent 0%,
transparent 50%,
rgba(150, 0, 0, 0.388235) 50%,
rgba(150, 0, 0, 0.388235) 100%
),
linear-gradient(-45deg,
transparent 0%,
transparent 50%,
rgb(255, 0, 0) 50%,
rgb(255, 0, 0) 100%
),
linear-gradient(90deg,
rgb(255, 0, 0) 0%,
rgb(255, 0, 0) 50%,
rgb(150, 0, 0) 50%,
rgb(150, 0, 0) 100%
),
black;
}
<!DOCTYPE html>
<html>
<body>
<div id="cube"></div>
</body>
</html>
Hi for creating a cube using css you must have to define the perspective width for box, and then rotate it to a certain angle to get its look.
here you may find how create a css cube
CSS 3D Cube
and here you may learn how Perspective property works
Perspective,
Hope it will help.
I am trying to highlight a square with radial gradient effect. I created the following css rule:
.highlight-move {
background-color: #75f547;
background-image: -webkit-radial-gradient(center center, circle cover, #75f547, #fff 100%);
background-image: radial-gradient(center center, circle cover, #75f547, #fff 100%);
}
The problem is that my gradient is not transparent: jsFiddle and therefore I have a white background on the square.
I thought that I would be able to fix it with rgba, but as you see in the fiddle it does not work. How can I make my gradient transparent?
One additional important problem is not to highlight the piece on that color: thanks to Hashem for his :after solution.
Actually you are overriding the background color of the square itself so that the rgba() won't give the desired effect in that case.
You could use pseudo-elements to apply the gradient on top of the square as follows:
EXAMPLE HERE
.highlight-move:after {
content: "";
position: absolute;
top: 0; bottom: 0; left: 0; right: 0; /* set dimensions up to the parent */
background: #75f547;
background: -webkit-radial-gradient(center center, circle cover, rgba(117, 245, 71, 1), rgba(255, 255, 255, 0) 100%);
background: radial-gradient(center center, circle cover, rgba(117, 245, 71, 1), rgba(255, 255, 255, 0) 100%);
}