I am trying to create a background using css where one side is a solid color and the other is a texture: the two are split by a diagonal line. I would like this to be 2 separate divs since I plan to add some motion with jQuery where if you click on the right, the grey triangle gets smaller and if you click on the left the textured triangle gets smaller (like a curtain effect). Any advice would be greatly appreciated.
I think using a background gradient with a hard transition is a very clean solution:
.diagonal-split-background{
background-color: #013A6B;
background-image: -webkit-linear-gradient(30deg, #013A6B 50%, #004E95 50%);
}
Here are the examples in action: http://jsbin.com/iqemot/1/edit
You can change the placement of the diagonal line with the border pixels. With this approach you would have to position content over the background setup however.
#container {
height: 100px;
width: 100px;
overflow: hidden;
background-image: url(http://www.webdesign.org/img_articles/14881/site-background-pattern-07.jpg);
}
#triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid gray;
border-right: 100px solid transparent;
}
<div id="container">
<div id="triangle-topleft"></div>
</div>
For this sort of thing you could use pseudo selectors such as :before or :after in your CSS to minimize on unnecessary HTML markup.
HTML:
<div id="container"></div>
CSS:
#container {
position: relative;
height: 200px;
width: 200px;
overflow: hidden;
background-color: grey;
}
#container:before {
content: '';
position: absolute;
left: 20%;
width: 100%;
height: 200%;
background-color: rgb(255, 255, 255); /* fallback */
background-color: rgba(255, 255, 255, 0.5);
top: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
JSFiddle
I then attempted to to make it so that each section could expand depending on where you clicked. This unfortunately requires a little extra jQuery as the position of your click (relative to the the box) needs to be worked out.
A class is then added to the box which changes the :before pseudo object. The upside of using a class is that CSS animations are optimized better for the browser than jQuery ones.
JSFiddle
Resources:
Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQuery
Using jQuery how to get click coordinates on the target element
This method words on different sized windows and fills the screen. Even works on mobile.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Diagonal</title>
<style>
*{
margin: 0;
padding: 0;
}
.diagonalimg{
width: 100%;
height: 100vh;
background-image: linear-gradient(to top left, #e394a3 50%, #8dd6a6 50%);
}
</style>
</head>
<body>
<div class="diagonalimg">
</div>
</body>
</html>
This is a full responsive solution. Note the 50.3% on the second stop point, this avoids the pixelating of the line as mentioned in the above comment by #timlg07
.responsive-diagonal {
width: 50vw;
height: 20vh;
background: linear-gradient(to right bottom, #ff0000 50%, #0000ff 50.3%);
}
<div class="responsive-diagonal"></div>
Method 1:
<div class="triangle"></div>
body {
margin: 0;
}
.triangle {
background-image: linear-gradient(to bottom right, LightGray 50%, Salmon 50%);
height: 100vh;
}
https://codepen.io/x-x00102/pen/ZEyEJyM
Method 2:
<div class="triangle"></div>
body {
margin: 0;
}
div {
width: 100vw;
height: 100vh;
}
.triangle::after {
content: '';
position: absolute;
border-top: 100vh solid LightGray;
border-right: 100vw solid Salmon;
}
https://codepen.io/x-x00102/pen/VwWwWGR
Here's a solution to add a diagonal line triangle to the end of a section, it requires one of the two sections to have a flat colour BG, but allows for the other to be a gradient or image.
The demo below shows it with the main section having a gradient, and the section below being a solid colour (in this instance, white).
/* Cruft for the demo */
body {
margin: 0;
padding: 0;
}
.gray-block {
background-image: linear-gradient(to bottom right, #000, #ccc);
color: #fff;
}
.gray-block__inner {
padding: 20px;
}
/* The actual solution */
.diagonal-end::after {
content: "";
display: block;
margin-top: -6vw; /* optionally move the diagonal line up half of its height */
border-top: 12vw solid transparent; /* change 12vw to desired angle */
border-bottom: 0px solid transparent;
border-right: 100vw solid #fff;
}
<div class="gray-block diagonal-end">
<div class="gray-block__inner">
<span>Some content</span>
</div>
</div>
Related
I'm trying to create a navigation bar with a fading gradient for the mobile version of a page. For a demonstration of what I'm describing, take a look at the mobile version of the Google search result page. The when you scroll the horizontal navbar (with links to news, shopping, images, etc. subpages), the far left and right of the text fades out.
As you can see, each of the navbars show fading gradients, at the same places relative to the viewport and at different places relative to the navigation links. On the first, the gradients are on 'alles' and 'shopping', on the second, the gradients are on 'alles' and the 'm' in maps, and on the third the gradient is on 'news' and no text is far enough to the right to have a gradient.
The challenge here is that the text needs to be scrollable, and the gradient needs to stay in the same place in the viewport. The position of the gradient relative to the text needs to change as the text scrolls.
All of the solutions I've found for gradient text with CSS involve using a -webkit-linear-gradient background with -webkit-background-clip: text;, and -webkit-text-fill-color: transparent;. This basically creates a gradient background which contours the text, and then makes the text invisible so the background can be seen. The background doesn't scroll.
Are there any solutions to this problem using CSS?
Thanks!
I would create an overflowing div on top of your bar with pointer-event: none;. This div would contain a gradient background from white to transparent to white again. It can be done using css or an image.
.bar {
position: relative;
width: 100%;
background-color: white;
}
.gradient {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
pointer-events: none;
background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 1) 100%);
}
<div class="bar">
test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
<div class="gradient">
</div>
</div>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: sans-serif;
}
.nav-outter {
position: relative;
}
.nav-outter::before {
position: absolute;
top: 0;
left: 0;
width: 80px;
height: 100%;
content: '';
background: linear-gradient(to right, #fff, transparent);
pointer-events: none;
}
.nav-outter::after {
position: absolute;
top: 0;
right: 0;
width: 80px;
height: 100%;
content: '';
background: linear-gradient(to left, #fff, transparent);
pointer-events: none;
}
.nav {
width: 100%;
display: flex;
background-color: #ddd9d9;
box-shadow: 0 2px 10px rgba(128, 128, 128, 0.336);
overflow: auto;
}
.nav-link {
padding: 10px 20px;
border-bottom: 3px solid transparent;
}
.nav-link:hover {
border-bottom-color: dodgerblue;
cursor: pointer;
transition: .3s;
}
<div class="nav-outter">
<div class="nav">
<div class="nav-link">Home</div>
<div class="nav-link">Images</div>
<div class="nav-link">News</div>
<div class="nav-link">Videos</div>
<div class="nav-link">Home</div>
<div class="nav-link">Images</div>
<div class="nav-link">News</div>
<div class="nav-link">Videos</div>
<div class="nav-link">Home</div>
<div class="nav-link">Images</div>
<div class="nav-link">News</div>
<div class="nav-link">Videos</div>
<div class="nav-link">Home</div>
<div class="nav-link">Images</div>
<div class="nav-link">News</div>
<div class="nav-link">Videos</div>
</div>
</div>
Is it possible to create gradient borders combined with a border radius?
I created a button with an ::after element
button{
background: -webkit-gradient ...
}
button::after{
content: '';
position: absolute;
height: calc(100% - 2px);
width: calc(100% - 2px);
left: 1px;
top: 1px;
background: rgba(16,20,28,1);
border-radius: 40px;
z-index: -1;
}
Which looks like:
The problem is that the inner element should be transparent. If the background-color property of button is set to transparent, the button takes on the color (gardiet) of the ::after element:
I have found the following picture on the internet where the inner body is transparent and the border is a gradient.
There are multiple tricks to get such a border but these don't support the border-radius.
A posibility, limited in support to modern browsers (all major browser except IE) and also limited to the colors that you can achieve, is to use mix-blend-mode, that can make gray look like transparent.
Also, some special properties to get the border, to begin with
.container {
width: 300px;
height: 100px;
background-color: lightgreen;
}
.test {
position: absolute;
margin: 20px;
font-size: 30px;
border-radius: 1em;
border: solid 12px transparent;
width: 200px;
background: linear-gradient(gray,gray), linear-gradient(to right, red, blue);
background-clip: content-box, border-box;
background-origin: border-box;
mix-blend-mode: hard-light;
}
<div class="container">
<div class="test">TEST</div>
</div>
Is it possible to make an entire element invisible except for its border or outline using pure CSS? By "invisible", I mean entirely transparent (i.e. visibility: hidden; or opacity: 0;) with a visible surrounding border. All text, children, background, et al., would be hidden.
I know this could be accomplished by creating a parent div around the invisible element, but I am curious as to whether or not it would be possible to achieve the same effect without changing the HTML.
Can this be done?
Hmm, I think it is:
HTML
<div id="element">
...
</div>
CSS
#element {
width: 100px;
height: 100px;
border: 1px solid #000;
}
#element * {
opacity: 0;
}
You could do something like that using child selections.
Example
<div class="box">
<p>some child content</p>
</div>
.box{
width: 100px;
height: 100px;
border:5px solid black;
}
.box >* {
opacity: 0;
}
You can use RGBA as color to achieve that, have a look at this:
LIVE DEMO
THE STYLE:
body {
background: red;
}
div {
width: 100px;
height: 60px;
border: 4px solid black;
background: rgba(255, 255, 255, 0.2);
}
div * {
opacity: 0;
}
THE MARKUP:
<div>
<span>Guten Morgen</span>
</div>
I'm not sure what is specific name for this shape but can I just called it "half Parallelogram" ? I want make this shape purely using CSS/CSS3. Any help? or tutorial?
You can do it using pseudo-elements like below. The approach is to cut out a triangle shape from the left-bottom and top-right of the box. This method can be used with either a solid color an image inside the shape as long as the body background is a solid color. When the body background is a non-solid color this approach will not work because the border hack needs a solid color background.
The advantage of this method is that it can support cuts of different angles at each side (like in the question where the hypotenuse of the triangular cut on either side are not parallel to each other).
div {
background: red;
width: 200px;
height: 100px;
position: relative;
}
div:before {
position: absolute;
height: 0;
width: 0;
content: ' ';
border: 20px solid white;
border-color: transparent transparent white white;
border-width: 20px 0px 0px 15px;
left: 0;
top: 80px;
}
div:after {
position: absolute;
height: 0;
width: 0;
content: ' ';
border: 20px solid white;
border-color: white white transparent transparent;
left: 170px;
top: 0px;
}
.with-img {
background: url(http://lorempixel.com/100/100);
}
<div></div>
<br>
<div class="with-img"></div>
Sample 2: You can also achieve a similar effect using gradients. Just 1 gradient is enough to produce a cut of similar angle on both sides. If different angles are required then two gradients should be used. However the multiple gradient approach mentioned here will not work when the body background is a non-solid color.
div {
width: 200px;
height: 100px;
position: relative;
}
.with-single-gradient {
background: linear-gradient(45deg, transparent 5%, yellowgreen 5%, yellowgreen 90%, transparent 90.5%);
}
.with-single-gradient.image {
background: linear-gradient(45deg, white 5%, transparent 5%, transparent 90%, white 90.5%), url(http://lorempixel.com/100/100);
}
.with-multiple-gradient.image {
background: linear-gradient(45deg, transparent 0%, transparent 90%, white 90%), linear-gradient(60deg, white 10%, transparent 5%, transparent 100%), url(http://lorempixel.com/100/100);
}
<div class='with-single-gradient'></div>
<br>
<div class='with-single-gradient image'></div>
<br>
<div class='with-multiple-gradient image'></div>
Sample 3: This can also be created using SVG and is the best method yet. All that it requires is just a single path element which creates the required shape.
<svg viewBox='0 0 100 60' width='200px' height='120px'>
<path d='M0,0 80,0 100,16 100,60 10,60 0,54z' fill='yellowgreen' />
</svg>
Tested on Chrome v24, Firefox v19, Safari v5.1.7 (on Windows) and IE v10. They are older versions but should work in the latest versions also.
Note: IE versions less than 10 do not support gradients as mentioned in this SO thread.
there's no thing as straight radius, but here you have some tutorials. For weird shapes, you need to use a combination of shape and negative space, basically using figures with the same color of the background . The good news is you could use "transparent" as color, so you can "fake" this figures in an easy way. See tutorials Shapes of CSS or yuo can use a generator like CSS Shape Generator or CSS Shape Generator 2 but they will highly depend on your needs. Personally, I'd use a BG image and be a happy camper
to make this shape you have to use pseudo class.
and i hope it will help you
div { display: inline-block; margin: 20px; float: left; }
shape {
width: 208px;
height: 130px;
background: red;
position: relative; }
shape:before {
content: "";
position: absolute;
top: 0;
left: 0;
border-bottom: 29px solid red;
border-right: 29px solid #fff;
width: 179px;
height: 0; }
shape:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
border-top: 29px solid red;
border-left: 29px solid #fff;
width: 42px;
height: 0; }
demo
2 gradients and background-size can be used too :
div {
width: 1440px;
height: 590px;
background:
linear-gradient(45deg, transparent 80px, #FF0000 80px) left no-repeat,
linear-gradient(-135deg, transparent 160px, #FF0000 160px) top right no-repeat;
background-size: 50% 100%;
}
<div>
</div>
1 gradients and calc() can be used too :
div {
width: 1440px;
height: 590px;
background:
linear-gradient(45deg, transparent 80px, #FF0000 80px, #FF0000 calc( 100% - 160px), transparent calc( 100% - 160px) );
}
<div>
</div>
Related to duplicate question https://stackoverflow.com/questions/36932294/how-can-i-create-the-object-in-picture-below-using-css-border-radius :
div {
width:980px;
height:460px;
background:linear-gradient(140deg,transparent 200px, #FFCB05 200px) left no-repeat,
linear-gradient(-40deg,transparent 80px, #FFCB05 80px) top right no-repeat;
background-size:50% 100% ;
}
<div>
div shape
</div>
image
<img src="http://i.stack.imgur.com/M48zP.png" />
For the second shape use this:
border-bottom-left-radius:50px;
border-top-right-radius:50px;
Check JSFiddle Demo
Edit:
Question is edited and second shape has been removed.
You can add an element with overflow: hidden;
skew transform the parent by desired angle. Unskew the pseudoelement by the negative of that angle.
Using this approach, you can also add images to background.
div {
height: 100px;
width: 220px;
overflow: hidden;
position: relative;
-webkit-transform: skewX(45deg);
-moz-transform: skewX(45deg);
transform: skewX(45deg);
}
div:before {
content: '';
position: absolute;
left: 10px;
height: 100px;
width: 200px;
background: red;
-webkit-transform: skewX(-45deg);
-moz-transform: skewX(-45deg);
transform: skewX(-45deg);
}
<div></div>
FIDDLE
FIDDLE (with image)
Is it possible to make only part of div transparent like an amount of space in div.
For example, you select 100px from top of div and the top 100px have an opacity set?
How would I do it?
You can do a couple of things:
Try a background image where half is transparent and the other half is not.
Use a CSS gradient in such a way that half is transparent and the other is not. Ex:
background: -moz-linear-gradient(top, rgba(30,87,153,0) 0%, rgba(41,137,216,0) 50%, rgba(34,125,203,1) 52%, rgba(125,185,232,1) 100%); /* FF3.6+ */
Use multiple divs where one has transparent BG and the other does not. Ex:
<div>
<div id="transparent" style="background: transparent"></div>
<div id="not-transparent" style="background: #000"></div>
</div>
I'm sure there are other ways, but those are the first three that come to mind.
Good luck.
Either you create the right background-image using a semi-transparent PNG (transparent at top, opaque at bottom for example) ; either you use two sub-divs, each having its own background-color (one of which with rgba for the transparent part).
You can use css3 properties along with pseudo elements to create this effect:
The trick is to draw a box with :before or :after pseudo element. We can apply background property for inner semi-transparent background. While for outer background we can use a large box-shadow value.
HTML:
<div class="box"></div>
CSS:
.box {
position: relative;
overflow: hidden;
height: 120px;
width: 250px;
}
.box:before {
background: rgba(0, 0, 0, 0.3);
box-shadow: 0 0 0 1000px #000;
position: absolute;
height: 50px;
width: 50px;
content: '';
left: 0;
top: 0;
}
html,
body {
height: 100%;
}
body {
background: linear-gradient(to top, #ff5a00 0, #ffae00 100%);
margin: 0;
}
.box {
position: relative;
margin: 30px 20px;
overflow: hidden;
height: 120px;
width: 250px;
}
.box:before {
background: rgba(0, 0, 0, 0.3);
box-shadow: 0 0 0 1000px #000;
position: absolute;
height: 50px;
width: 50px;
content: '';
left: 0;
top: 0;
}
<div class="box"></div>