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>
Related
I have two <div> elements. When the user hovers, a transformation of transform: translateY(x, y); is applied. However, a black border also somehow appears (there should only be a red border) when the user hovers.
Resolution: 1920*1080
.link {
display: block;
height: 350px;
width: 200px;
background: black;
border: 1px solid red;
}
.element {
background: white;
height: 100%;
width: 100%;
}
.link:hover {
transform: translateY(-5px)
}
<div class="link">
<div class="element">
test
</div>
</div>
I am not absolutely sure I am understanding the problem, but one way to get rid of the black on hover is to set the background to transparent then. See snippet below.
Note that trying to get exact alignment of very thin borders/lines (1 CSSpx in this case) is not always possible given modern displays use several 'physical' pixels for one CSS pixel. Sometimes zooming in/out shows/doesn't show 1 (display) pixel 'left behind'. And I have seen this in this case, so certain display sizes may show the black.
.link {
display: block;
height: 350px;
width: 200px;
background: black;
border: 1px solid red;
}
.element {
background: white;
height: 100%;
width: 100%;
}
.link:hover {
transform: translateY(-5px);
background: transparent;
}
<div class="link">
<div class="element">
test
</div>
</div>
I'm wondering if it is at all possible to achieve a curved border (with a stroke) using only CSS? At the moment I'm creating curved borders for the header of my website using images:
I'd like to change this to a CSS solution so that I'm not having to alter images when the amount of content within changes - I need these to be dynamic and responsive, I've managed to draw a curve using border-radius:
This works much better for me, but I'm wondering if it is possible to add a stroke to it to make it look a more like the image representation? Any help is greatly appreciated. Here's the code I've written to achieve this:
<div class="slider">
<div class="slide">
<!-- Content -->
</div>
</div>
CSS:
.slider {
background: #21639e;
}
.slider .slide {
background: url("image.jpg") no-repeat #21639e;
border-radius: 100%/0 0 30px 30px;
}
I did try adding border-bottom: 5px solid #fff; to the .slide class, but it ended up looking like this:
I've created a jsfiddle for you to test what I'm trying to achieve.
Yes, you can try and use box shadows to create this kind of border. Applying a white box shadow on the outer side of the element will make it look like a stroke/border.
This - border-bottom: 5px solid #fff; produces a different kind of effect because we are applying only the bottom border to the element. The borders on the left and right are non existent (zero width) and so the line thins out as you go nearer to the edges.
.slider {
height: 500px;
background: #21639e;
}
.slider .slide {
height: 200px;
background: url("http://placehold.it/800x800/FF00FF") no-repeat #21639e;
border-radius: 100%/0 0 30px 30px;
box-shadow: 0px 6px 0px white;
}
<div class="slider">
<div class="slide">
Some content
</div>
</div>
Below is an updated version of your Fiddle.
For a more graceful looking curve then you can also try the below approach. It uses a pseudo element which is wider than the .slide and then centers the image within it. (I feel that this approach makes it look closer to the original image but the choice is yours)
.slider {
height: 500px;
background: #21639e;
}
.slider .slide {
position: relative;
height: 200px;
width: 100%;
overflow: hidden;
}
.slider .slide:before {
position: absolute;
content: '';
left: -2%;
top: -6px;
width: 104%;
height: 100%;
background: url("http://placehold.it/800x800/FF00FF") no-repeat center center #21639e;
border-radius: 100%/0 0 30px 30px;
box-shadow: 0px 6px 0px white;
}
<div class="slider">
<div class="slide">
Some content
</div>
</div>
I am using a .png image and I want to create a big white shadow, like an aura, around it; but I want it just to affect the background, and not text and other elements I have in the page!
How it could be helped? Is there a method for making the shadow hit just the background? Or i can't at all? Thanks!
HTML:
<div class="background">
<div id="round"></div>
<div class="text">
TEXT
</div>
</div>
CSS:
#round {
filter: drop-shadow(0px 0px 40px red);
width: 100px;
height: 100px;
background-color: yellow;
margin: 0px;
display: inline-block;
}
.background {
background-color: #ddd;
}
.text {
color: yellow;
font-weight: bold;
font-size: 50px;
float: left;
}
This way the shadow will be reflected on the text, that is not what i want to archieve.
As asked, also a fiddle of the problem: https://jsfiddle.net/k371t6jd/
Nobody could give an answer. The solution was: you can't. Regards.
I wondered if it was possible to create two background-colors for a div an overlay them.
I want a white background-color so that the content below this div doesn't shine through and another rgba() color painted over this white to create lighter colors per script.
Without understanding why you want this, it can be done by using solid color gradients: fiddle.
body {
background: linear-gradient(rgba(220,14,120,0.5), rgba(220,14,120,0.5)),
linear-gradient(white, white); /* first bg is on top of this */
}
Though Adrift's answer is the way to go, you can also use pseudo elements for this.
body {
background: white;
position: relative;
}
body:before {
content: "";
position: absolute;
top: 0;
left; 0;
width: 100%;
height: 100%;
background: rgba(220,14,120,0.5);
z-index: 1;
}
/* Just to be sure, automatically set all elements to a higher z-index than the pseudo element */
body * {
z-index: 2;
position: relative;
}
Here is a fiddle.
However, this is not production friendly:
Setting position relative on body and all other elements when not necessary
Setting unnecessary z-index on all elements
The only upside this method has, is that it doesn't use gradients which, from a semantic standpoint, is more logical.
You can't define two background-colors for one element, but you could overlay one coloured element on top of a white one in order to get a blending effect, while blocking out anything below them:
JSFiddle
HTML
<div class="one">
<div class="two"></div>
</div>
CSS
div {
width: 100px;
height: 100px;
}
.one {
background-color: #fff;
}
.two {
top: 0;
left: 0;
background-color: rgba(0,0,255,0.2);
}
To answer your question, yes there is a way. You can use a background image and a background color on the same div. Check out this SOF post.
Although I would consider a different method like this:
Structure:
<div class="parent">
<div class="white"></div>
<div class="color"></div>
</div>
CSS:
.parent {
position: relative:
}
.white, .color {
position:absolute;
top: 0px;
left: 0px;
}
.white {
z-index: 9998;
}
.color {
z-index: 9999;
}
You can mess around with the details here, but the overall idea is that your layer the divs on top of each other. The div with the higher z-index will be on top. Change their colors accordingly. The parent div being relative will keep the absolute divs inside of that container.
To achieve multiple background colors in CSS, a common proposal is
Solid Color Gradients
But there is an alternative:
Solid Color background-images via SVG Data URIs
The working example below contains the following areas with the following background colors:
<main> - dark-gray
<section> - light-gray
<div class="circle"> - translucent red
In this set-up, we want to use the same theme-color for all the circles, rgba(255, 0, 0, 0.5) but we also want the circles inside the <section> to appear to have the same background-color as the circle outside <section>.
We can observe that, due to the application of the technique below to div.circle.does-not-blend - the rightmost of the two circles inside <section> - that circle ends up with the same apparent background-color as div.circle outside <section>.
The Approach
The approach is to give div.circle.does-not-blend:
the same initial background-color as <main>
an SVG Data URI background-image with the same translucent red background-color as the other .circle elements
The SVG background-image
The SVG Data URI background-image looks like this:
data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" style="background-color:rgba(255, 0, 0, 0.5);"%2F%3E
The Result
In the final result we see that the light-gray background-color of <section> does not bleed through and influence the final background-color of div.circle.does-not-blend
Working Example
main {
display: flex;
justify-content: space-around;
align-items: center;
height: 180px;
padding: 0 9px;
background-color: rgb(127, 127, 127);
border: 1px solid rgb(0, 0, 0);
}
section {
display: flex;
justify-content: space-around;
align-items: center;
flex: 0 0 66%;
background-color: rgb(191, 191, 191);
height: 162px;
}
.circle {
display: inline-block;
width: 120px;
height: 120px;
color: rgb(255, 255, 255);
text-align: center;
line-height: 120px;
background-color: rgb(255, 0, 0, 0.5);
border-radius: 50%;
}
.circle.does-not-blend {
background-color: rgb(127, 127, 127);
background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" style="background-color:rgba(255, 0, 0, 0.5);"%2F%3E');
}
<main>
<div class="circle"></div>
<section>
<div class="circle">Incorrect</div>
<div class="circle does-not-blend">Correct</div>
</section>
</main>
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>