I can't seem to figure this out. I have a bootstrap card which is 100% filled with an image. On top of the image I have some text which is made clearly visible by using a transparent rectangle overlay. I'd like the transparent rectangle overlay to be slanted so I get a similar effect to the cards on https://www.evensi.com home page.
My card HTML
<div class="card border-0" style="width:100%;">
<img class="card-img-top" src="IMAGE HERE" alt="Card image">
<div class="card-img-overlay">
</button>
<div class="bottom text-light">
SOME TEXT OVER IMAGE HERE
</div>
</div>
</div>
Card styling
.card {
box-shadow: 1 3px 1px 1 rgba(1, 1, 3, 0.6);
transition: 0.3s;
width: 100%;
border-radius: 15px;
padding: 3px;
}
.card:hover {
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.4);
}
/* Card image dark filter */
.card-img-top {
width: 100%;
height: 350px;
object-fit: cover;
/* photo brightness */
filter: brightness(85%);
border-radius: 15px;
padding: 2px;
}
/* Align heading text to bottom of photo */
.bottom {
position: absolute;
right: 0;
left: 0;
padding: 15px;
bottom: 0px;
padding-bottom: 15px;
/* shaded filter overlay */
background-color: rgba(12, 23, 23, 0.6);
/* background-color: black; */
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}
3 ways to have a slanted container:
use transform: rotate(); on an element separate from your text container.
use pseudo elements ::before or ::after
use background-image of a .png file so that you can have transparency on your text container.
Pseudo elements ::before and ::after have to be attached to a desired element like a div, for example. They also have to have content property, otherwise they will not show at all.
div::before {
content: "";
}
Their parent element is considered to be the element they are attached to, that would be div in this example. So you can use absolute positioning easily to position it according to your needs.
I made a fiddle with the card example.
https://jsfiddle.net/vbgrn98s/1/
You will have to play with border-width property to adjust its size to suit you.
Related
Is it possible to cover text with blurry image border like in this picture? The problem is that the picture is contained in trapezoid shaped element. I was reading about clip-path and wanted to do the trick with inset box-shadow to get this transparent border effect but it is not working and I have no idea how to workaround this.
clip-path is not that well supported in most browsers (see this resource)
Use a graphic program to create that kind of effect and then stack all your layers together. I used Photoshop, but you can use any other graphic program that can save PNGs with an alpha channel (e.g. GIMP)
Here a step-by-step instruction:
Open your image and unlock background layer by double clicking on the lock in the Layers window. Then add a mask
Add a gradient to your mask
Save your image for Web as PNG-24 or PNG with alpha channel. Make sure Transparency is checked
Now to the code part:
.Header {
position: relative;
max-width: 488px;
height: 200px;
/* just some font stuff */
font: 2.5em sans-serif;
font-weight: bold;
text-transform: uppercase;
}
.Header > div {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.Header-layer1 {
z-index: 1;
}
.Header-layer1 span {
position: absolute;
left: 150px;
top: 50px;
}
.Header-layer2 {
background: url( https://i.stack.imgur.com/f9fIM.png ) no-repeat left top;
z-index: 2;
}
.Header-layer3 {
z-index: 3;
}
.Header-layer3 span {
position: absolute;
left: 175px;
top: 70px;
color: #ede8d7;
text-shadow: 1px 1px 10px rgba( 0, 0, 0, .05 );
}
<div class="Header">
<div class="Header-layer1">
<span>Some</span>
</div>
<div class="Header-layer2">
<!-- we add the background image to this layer with CSS -->
</div>
<div class="Header-layer3">
<span>text here</span>
</div>
</div>
Image credit
I am trying to make a css styling for a harvey ball with an image inside, but so far I haven't figure out a way to do it right. This is what I have now:
.three {width: 43px;
border-radius: 100%;
border-style: solid;
border-width: 4px;
border-left-color: #dadad9;
border-top-color: #009ee3;
border-right-color: #009ee3;
border-bottom-color: #009ee3;
width:40px;
height:40px;
}
.lead-name {
font-size: 16px;
font-family:Symantec Sans;
color:#424242;
font-weight: 600;
margin-bottom:0px;
}
.lead-title {
font-size: 14px;
font-family:Symantec Sans;
color:#424242;
margin-top: -3px;
margin-bottom: 10px;
}
<div class="lead-designer">
<img class="three" src="http://orig09.deviantart.net/09e7/f/2008/159/0/1/side_profile_vector_by_sruphil.png"/>
<div style="display:inline-block; margin-bottom:0px; margin-top:5px;">
<p class="lead-name">Designer Name</p>
<p class="lead-title">Messaging PO</p>
</div>
</div>
https://jsfiddle.net/yiluka/dtauydrz/
What I want is something like
As you can see, I want the circle to be divided straight and have part of the image grey scaled.
I have a lot of them and I really want to do it in code instead of photoshop to save some labor.
You can also do it using the pseudo element ::after - https://jsfiddle.net/dtauydrz/3/
The HTML:
<div class="image-container">
<img class="three" src="http://orig09.deviantart.net/09e7/f/2008/159/0/1/side_profile_vector_by_sruphil.png"/>
</div>
<div style="display:inline-block; margin-bottom:0px; margin-top:5px;">
<p class="lead-name">Designer Name</p>
<p class="lead-title">Messaging PO</p>
</div>
The CSS:
.three {
border-radius: 100%;
border-left-color: #dadad9;
border-top-color: #009ee3;
border-right-color: #009ee3;
border-bottom-color: #009ee3;
width:40px;
height:40px;
border-style: solid;
border-width: 4px;
border-color: #dadad9;
}
.image-container::after{
content: "";
display:block;
position: absolute;
margin-top: -52px;
background-color: #009ee3;
-moz-border-radius: 25px 0 0 0;
border-radius: 25px 0 0 0;
width: 25px;
height: 25px;
opacity: 0.5;
}
After an hour of messing with it, I finally finished my solution.
TL;DR
JSFiddle Demo
JSFiddle Demo with a kitten(pick this one)
JSFiddle Demo with the unhappy king of all kittens(Actually this one is amazing)
This solution, after being implemented, renders this(minus, of course, the amazing hand-drawn circle):
This solution doesn't require square images, playing with the background-image placement, and is quite easy to implement.
Let's get started!
First of all, we take your nice <img> HTML element, and replace it with this monstrosity of HTML(It really isn't that bad):
<div class="image-wrapper">
<img class="main" src="http://orig09.deviantart.net/09e7/f/2008/159/0/1/side_profile_vector_by_sruphil.png">
<div class="grayscale">
<img class="gray" src="http://orig09.deviantart.net/09e7/f/2008/159/0/1/side_profile_vector_by_sruphil.png">
</div>
</div>
Now for a little explanation. We use two different image elements so we can gray-scale one of them. We do not use a background image, since this requires a massive amount of changes if you want to make the icon bigger, or the images are different sizes.
.image-wrapper is the container div, the elements inside are positioned relative to it. It's CSS is stupid simple:
.image-wrapper {
position: relative;
}
(If you can't understand that CSS, go read HTML5 and CSS3 for dummies. That's how I started with css... #destroying_my_reputation)
.main is, of course, the main image in color. It's CSS is a little mor complicated, but still very basic:
.main {
width: 100px;
border-radius: 100%;
border: 5px solid #dadad9;
}
The width can be changed to whatever you want, if you do change the width, make sure you also change the width of the .gray image. border-radius:100% makes a circle, and border obviously adds a border.
Now on to the more complicated CSS(It's all pretty simple)!
.grayscale is the div used to hold the gray-scale image. If you know CSS, you can probably tell what is happening.
.grayscale {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
height: 50px;
width: 50px;
border-radius: 100% 0 0 0;
background: #009ee3;
padding-top: 5px;
padding-left: 5px;
}
The div is positioned absolute at the top-left corner of .image-wrapper. Anything overflowing it is hidden. It's top-left corner is given a border-radius of 100%, making it into the quarter-circle shape. Instead of a border, we change it's background color, and add a padding. This is because if we use a border, it is added to all sides, messing up the desired shape.
And then the .gray img:
.gray {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
width: 100px;
border-radius: 50% 0 0 0;
}
Simple, the image is changed to gray-scale using the grayscale() CSS filter. Make sure the width is the same as .main. And a border radius to add the round effect.
That's a wrap!
And here is the long awaited demo, with all the code
I just created a div that has the shape of a quarter circle
.quarter-circle-top-left {
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 50%;
background: rgba(0, 0, 0, 0.4);
border-radius: 100px 0 0 0;
-moz-border-radius: 100px 0 0 0;
-webkit-border-radius: 100px 0 0 0;
border-left: 4px solid #009ee3;
border-top: 4px solid #009ee3;
}
And absolutely positioned that div on top of your image. It's got a transparent gray background and a top and left border with your blue. Both are now contained within an wrapper div so that the quarter circle would have something to be relative to.
Here's where the quarter circle css came from: http://1stwebmagazine.com/css-quarter-circle (I changed the class names because they seemed backwards to me).
And here's the updated fiddle: https://jsfiddle.net/ingridly/dtauydrz/1/
UPDATE:
I incorporated the idea from the other answers of filling another element with the image and grayscale-ing that, and now I think this answer does everything:
https://jsfiddle.net/ingridly/dtauydrz/6/
I have a standard image (that is responsive because of bootstap) and would like to overlay a standard grid 5% x 5% on top of it.
I need to pick points on the images and need the grid to be visible as well as the image.
I upload the image via form and it show up in a form location on the html. I would like to know how to add additional css on top it - to get the grid on top it.
See the image below for a sample (I only put 8 grid - but I would like 5% spacing or 10% spacing both x and y).
Using two linear-gradients on pseudo-elements of the div, one on ::before and one on ::after, we can create two simple lines which are then repeated every nth-percent with background-size. The ::after pseudo-element is rotated 90deg to create the horizontal lines. It looks like this:
.grid::before,
.grid::after {
background: linear-gradient(to right, #000 2px, transparent 2px);
background-size: 10%;
}
.grid::after {
transform: rotate(90deg);
}
The two gradients create two intersecting lines which are a percentage size long, like this:
These lines are repeated with the default background-repeat: repeat, which creates a grid, like this:
When the ::before and ::after pseudo elements are placed over the image we get this:
You can create a fixed grid size, using a fixed pixel background-size:
.fixed::before,
.fixed::after {
background-size: 23px;
}
Example
Note how the entire grid is given an outline using box-shadow: inset 0px 0px 0 2px #000; on ::before.
*,
*::before,
::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.grid img {
display: block;
}
.grid {
display: inline-block;
position: relative;
margin: 10px;
vertical-align: top;
}
.grid::before,
.grid::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to right, #000 2px, transparent 2px);
background-size: 10%;
}
.grid::before {
background-color: rgba(255, 0, 0, 0.56);
box-shadow: inset 0px 0px 0 2px #000;
}
.grid::after {
transform: rotate(90deg);
}
.fixed::before,
.fixed::after {
background-size: 23px;
}
<div class="grid">
<img src="https://dummyimage.com/300x300/ccc" width="300" height="300" />
</div>
<div class="grid">
<img src="https://dummyimage.com/200x200/ccc" width="200" height="200" />
</div>
<div class="grid">
<img src="https://dummyimage.com/100x100/ccc" width="100" height="100" />
</div>
<div class="grid fixed">
<img src="https://dummyimage.com/500x500/ccc" width="500" height="500" />
</div>
hello I want to know if there's a way that I can make a border from an image which is 1px but repeat and the border width is 13px.
to get an output like this
Thank you
You can do this in 2 ways.
1.
Since you only have a 1px image with (obviously) 1 color, rgba() may be more appropriate here:
border: 13px solid rgba(0, 0, 0, 0.5); /* use your colorcode */
2.
div { /* this is your div with the content in it */
width: 300px;
height: 300px;
position: relative;
}
div:before { /* this will be your "border", it will be placed underneath your "content" div */
content: "";
position: absolute;
top: -13px;
left: -13px;
width: 100%;
height: 100%;
padding: 13px;
z-index: -1;
background: url(your-border-image.png);
}
Put the image inside a div like this:
<div class="image">
<img src="myimage.png" />
</div>
Then add the border to that div:
.image {
border: 13px solid rgba(220, 190, 148, 0.3);
}
Voila!
Use rgba colors for the background and border to create such an effect:
background: rgba(234,198,152,.8);
border: 13px solid rgba(162,130,89,.5);
http://jsfiddle.net/feeela/c4ca46yo/
You can expand that example and load the correct fonts through #font-face and just include the background image and the stones as real images. (using an IMG-tag or CSS background-image)
I want to achieve this using html and css:
I have tried to set the opacity of the container to 0.3 and the box to 1, but it doesn't work: both divs have 0.3 opacity.
jsFiddle of my try here
The effect I am trying to achive is a popup box that comes on top of the page. It is highlighted by fading the content below (by lowering the opacity).
You can use opacity in combination with background color, like this:
#container {
border: solid gold 1px;
width: 400px;
height: 200px;
background:rgba(56,255,255,0.1);
}
#box {
border: solid silver 1px;
margin: 10px;
width: 300px;
height: 100px;
background:rgba(205,206,255,0.1);
}
<div id="container">
containter text
<div id="box">
box text
</div>
</div>
Live demo
As far as I know you can't do it in a simple way. There a couple of options here:
Use absolute positioning to position box "inside" the container.
#container {
opacity: 0.3;
background-color: #777788;
position: absolute;
top: 100px;
left: 100px;
height: 150px;
width: 300px;
}
#box {
opacity: 1;
background-color: #ffffff;
position: absolute;
top: 110px;
left: 110px;
height: 130px;
width: 270px;
}
<div id="container"></div>
<div id="box">
<p>Something in here</p>
</div>
Use Javascript - almost the same as above, but position and size don't have to be hardcoded.
You can't apply an opacity property without affecting a child element!
"Opacity applies to the element as a whole, including its contents, even though the value is not inherited by child elements. Thus, the element and its children all have the same opacity relative to the element's background, even if they have different opacities relative to one another... If you do not want to apply opacity to child elements, use the background property instead." https://developer.mozilla.org/en-US/docs/Web/CSS/opacity
If you want the opacity to be applied only to the background, without affecting the child elements, use:
background-color: rgba(255, 255, 255, .3)
However, you can achieve the desired effect if you place them inside a div parent element and use CSS position property:
.parent {
border: solid green 3px;
position: relative;
width: 400px;
height: 200px;
}
.sibling-one {
border: solid red 3px;
position: absolute;
box-sizing: border-box;
width: 400px;
height: 200px;
opacity: .3;
}
.sibling-two {
border: solid blue 1px;
margin: 10px;
width: 200px;
height: 100px;
position: absolute;
transform: translateY(50%);
}
<div class="parent">
<div class="sibling-one">
<p>A sibling's one element</p>
</div>
<div class="sibling-two">
<p>A sibling's two element</p>
</div>
</div>
Try using rgba as a 'pre content' overlay to your image, its a good way to keep things responsive and for none of the other elements to be effected.
header #inner_header_post_thumb {
background-position: center;
background-size: cover;
position: relative;
background-image: url(https://images.pexels.com/photos/730480/pexels-photo-730480.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);
border-bottom: 4px solid #222;
}
header #inner_header_post_thumb .dark_overlay {
position: relative;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.75);
}
header #inner_header_post_thumb .dark_overlay .container .header-txt {
padding-top: 220px;
padding-bottom: 220px;
color: #ffffff;
text-align:center;
}
header #inner_header_post_thumb .dark_overlay .container .header-txt h1 {
font-size: 40px;
color: #ffffff;
}
header #inner_header_post_thumb .dark_overlay .container .header-txt h3 {
font-size: 24px;
color: #ffffff;
font-weight: 300;
}
header #inner_header_post_thumb .dark_overlay .container .header-txt p {
font-size: 18px;
font-weight: 300;
}
header #inner_header_post_thumb .dark_overlay .container .header-txt p strong {
font-weight: 700;
}
<header>
<div id="inner_header_post_thumb">
<div class="dark_overlay">
<div class="container">
<div class="row header-txt">
<div class="col-xs-12 col-sm-12">
<h1>Title On Dark A Underlay</h1>
<h3>Have a dark background image overlay without affecting other elements</h3>
<p>No longer any need to re-save backgrounds as .png ... <strong>Awesome</strong></p>
</div>
</div>
</div>
</div>
</div>
</header>
See a working codepen here
Using background-color: rgba(#777788, 0.3); instead of opacity could maybe fix the problem.
Apply this css rule
.alpha60 {
/* Fallback for web browsers that doesn't support RGBa */
background: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background: rgba(0, 0, 0, 0.6);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}
In addition to this, you have to declare background: transparent for IE web browsers.
For more details visit the following link:
http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/
Any child of an element with opacity set will take on that opacity.
To achieve this style you could use rgba colours and filters for IE for the background, and opacity on the textual elements. So long as the second box isn't a child of one of the text elements, then it won't inherit the opacity.
Another workaround is to simply use an overlay background to create a similar effect.
I personally like a black overlay with about a 65% opacity, but for what you are trying to do you may want to use a white overlay at round 70%.
Create a small (100 x 100 or less) PNG in Photoshop or GIMP that has the color and opacity you want. Then just set that as the background of your light box.
If you create multiple PNGs at different opacities you can easily switch between them with JS or dynamically at load via backend scripting.
It's not technically what you are trying to do, but aesthetically it can give a very similar effect and UX wise accomplishes the same thing. It is also very easy to do, and widely supported across pretty much everything.
Opacity will always inherits by the child element regardless whatever the element in there, there is no workaround up to today have suggested, when the moving of the child element outside the transparency background is not an option like in a popup menu/dialog box creation, use of background with the rgba is the solution.
Here is a input box that i created that i can turn on or off with the class property invisible by javascript
<div id="blackout" class="invisible">
<div id="middlebox">
<p>Enter the field name: </p>
<input type="text" id="fieldvalue" />
<input type="button" value="OK" id="addfname" />
</div>
</div>
CSS
#blackout {
z-index: 9999;
background: rgba(200, 200, 200, 0.6);
height: 100%;
width: 100%;
display: block;
padding: 0px;
clear: both;
float: left;
position: absolute;
margin-top: -10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: -10px;
}
#blackout #middlebox {
border: thick solid #333;
margin: 0px;
height: 150px;
width: 300px;
background-color: #FFF;
top: 50%;
left: 50%;
position: absolute;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
padding: 10px 50px 0px 50px;
}
#middlebox p {
float: left;
width:100%;
clear:both;
}
#middlebox input {
clear:both;
margin-bottom:10px;
}
#middlebox input[type=text]{
width:100%;
}
#middlebox input[type=button]{
float:right;
width:30%;
}
.invisible{
visibility:hidden !important;
}
Use such elements that you can add :before or :after. My solution
<div class="container">
<div>
Inside of container element is not effected by opacity.
</div>
</div>
Css.
.container{
position: relative;
}
.container::before{
content: '';
height: 100%;
width: 100%;
position: absolute;
background-color: #000000;
opacity: .25
}
This might not be the most orthodox method but you can use a small semi-transparent background image for each div / container that repeats. It does seem that in this day and age you should be able to achieve this in pure (simple not hackish) css with no js but as the answers above show it isn't that straight forward...
Using a tiled image might seem dated but will work no worries across all browsers.
You can add a container's sibling absolutely positioned behind container, with the same size, and apply opacity to it.
And use no background on your container.
Now container's children have no opaque parent and the problem vanishes.