How to make this headline in the css? Preferably without flexbox.
Image:
Although I would expect you to put some code and show us what you have tried, the following is one way to do it.
Essentially you create an after pseudo element, give it a 1px height and a background color of your choice. Then you position it absolutely within it's parent heading element with a lower z-index.
There are possibly better ways of doing it, with flexbox too but I didn't mention that as per the question.
.with-line {
position: relative;
}
.with-line span {
/*change it to match whatever background color you want.*/
background: white;
}
.with-line:after {
position: absolute;
left: 0;
right: 0;
content: "";
height: 1px;
background: #666;
top: 50%;
z-index: -1;
}
<h1 class="with-line"><span>Hello</span></h1>
Related
I need to create a layout that has an inner border around the whole page that sits on top of the content like below.
So far I have
body::before {
border: 2px solid black;
border-radius: 22px;
content: '';
display: block;
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
z-index: 1;
}
But that only extends to the height of the window, it doesn't extend to cover the whole of the page's content.
Some of the different sections of the page need to extend to the full width of the window so I can't wrap the whole page in a div and apply border styles to that, the element with the border needs to sit on top of everything else.
Any ideas on how to do that?
Easiest way I have found is to create an element that sits over the others on your site:
<div class="overlay">
<div class="overlay-border"></div>
</div>
And then add the appropriate styling:
.overlay{
position: absolute;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
padding: 20px;
box-sizing: border-box;
pointer-events: none;
z-index: 99;
}
.overlay-border{
border-radius: 10px;
border: 5px solid #111;
width: 100%;
height: 100%;
}
The "z-index: 99" might need to be increased if you start allocating z-index to other elements. "pointer-events: none" ensures that website users can still click on links and other elements behind the overlay.
You can also change "position: absolute" to "position: fixed" if you would like this overlay across the whole window.
And then if you want the overlay across the entire page you can add this simple javascript:
var body = document.body,
html = document.documentElement;
var height = Math.max(body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight);
document.querySelector('.overlay').style.height = height + 'px';
I am sure there is a better way to do this, however, this was just in the interim as I found my solution and I look forward to seeing the easier ways to do this :)
I need to use this shape and inside that shows a text. But, I don't know why the text is not showing.
HTML:
<div id="thebag">
<h3> Shihab Mridha </h3>
</div>
CSS:
#thebag{
position: relative;
overflow: hidden;
}
#thebag::before{
content: '';
position: absolute;
top: 0;
left: 0;
height: 50px;
width: 30%;
background: red;
}
#thebag::after {
content: '';
position: absolute;
top: 0;
left: 30%;
width: 0;
height: 0;
border-bottom: 50px solid red;
border-right: 70px solid transparent;
}
https://jsfiddle.net/kn87syvb/1/
You need to add position: relative (or position: inherit, since it's the same as the parent) to your #thebag h3 class. Currently, your CSS styles are only affecting the parent of the h3—in order for the h3 to show with the text, you need to define CSS styling for it.
https://jsfiddle.net/kn87syvb/2/
By setting a position:absolute to the #thebag::before you "broke" the flow and your text is behind your div. You have to precise, than the h3 tag will be relative depending it's container.
So you have to add this :
#thebag h3 {
position:relative
}
To precise all h3 on your #thebag section will be affected. Be careful, if you change your kind of selector, It won t work anymore.
May be it will be better to use a custom class, like this https://jsfiddle.net/kn87syvb/5/
You need to use postion:relative property:
#thebag h3{
postion:relative;
}
Small explanation:
position: relative will layout an element relative to itself. In other words, the elements is laid out in normal flow, then it is removed from normal flow and offset by whatever values you have specified (top, right, bottom, left). It's important to note that because it's removed from flow, other elements around it will not shift with it (use negative margins instead if you want this behaviour).
However, you're most likely interested in position: absolute which will position an element relative to a container. By default, the container is the browser window, but if a parent element either has position: relative or position: absolute set on it, then it will act as the parent for positioning coordinates for its children.
please check this snippet:
https://jsfiddle.net/kn87syvb/4/
You can also re-structure your HTML and CSS as follows:
HTML
<span class="start">Shihab Mridha</span>
<span class="end"></span>
CSS
.end {
height:0;
width:0;
float: left;
display: block;
border:10px solid #0f92ba;
border-top-color:transparent;
border-right-color:transparent;
border-bottom-color:#0f92ba;
border-left-color:#0f92ba;
}
.start{
height: 20px;
width: 60px;
float: left;
background: #0f92ba;
display: block;
color:#FFFFFF;
}
Reference Link : https://solutionstationbd.wordpress.com/2011/12/21/trapezoids-shape-with-css/
How can I set mix-blend-mode on an element, but not it's children? Setting the children to the default value of normal does not seem to work:
http://jsfiddle.net/uoq916Ln/1/
The solution on how to avoid mix-blend-mode affects children:
Make child element position relative, give it a width and height;
Create some real or pseudo element inside the child with absolute position, and apply mix-blend-mode to it;
Create inner element inside the child for your content. Make it's position absolute, and put it on top of other elements;
Live example
html
<div class="bkdg">
<div class="blend">
<div class="inner">
<h1>Header</h1>
</div>
</div>
</div>
css
.blend {
position: relative; /* Make position relative */
width: 100%;
height: 100%;
}
.blend::before { /* Apply blend mode to this pseudo element */
content: '';
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 1;
background-color: green;
mix-blend-mode: multiply;
}
.inner { /* This is our content, must have absolute position */
position: absolute;
z-index: 2;
}
h1 {
color: white;
}
I know this was asked over two years ago, but it could be useful in the future as it could be a better solution than creating pseudo-elements.
There is the CSS isolation property that allows to choose wether the child element should be rendered in its parent's context (auto) or as part of a new context, thus without any blend mode applied to it (isolate).
Check out this page for examples
someone commented that the the whole block is rendered with the effect and that is why you're having the issue. I am able to accomplish what you're are trying to do by removing the h1 from the block, position absolute, and a z-index of 1. here is a jsfiddle to show the effect.
html
<div class="bkdg">
<h1>Header</h1>
<div class="blend">
</div>
</div>
css
.blend {
background-color: green;
mix-blend-mode: multiply;
width: 700px;
height: 35px;
}
h1 {
color: white;
position: absolute;
top: -15px; left: 10px;
z-index: 1;
}
https://jsfiddle.net/jckot1pu/
It’s impossible to remove an element’s mix-blend-mode from its children.
MDN says that mix-blend-mode:
sets how an element's content should blend with the content of the element's parent and the element's background
To achieve the desired effect, place the child in a separate stacking context and make sure it renders on top of the element with mix-blend-mode set.
You need two things to make this work:
Make sure that your opaque content (your text) is not a child of the element that sets the background and the blend mode. For example, with CSS Grid Layout.
Make sure the text is rendered over, and thus not affected by, the element that sets the background and the blend mode. Setting mix-blend-mode on your background will create a stacking context for it, and you may need to give your content its own stacking context to ensure it gets rendered above it.
Position your elements with CSS Grid:
define a grid container with one auto-sized grid area
place both the background element and the text element into that one grid area (so that they overlap)
let the text element dictate the size of the grid area
have the background element stretch to the size of the grid area, which is dictated by the size of the text element
Then, set isolation: isolate on the text element to ensure it gets rendered above, and not under the background element.
A working example
.container {
display: grid;
grid-template-areas: 'item';
place-content: end stretch;
height: 200px;
width: 400px;
background-image: url(https://picsum.photos/id/237/400/200);
background-size: cover;
background-repeat: no-repeat;
}
.container::before {
content: '';
grid-area: item;
background-color: seagreen;
mix-blend-mode: multiply;
}
.item {
grid-area: item;
isolation: isolate;
color: white;
}
h1,
p {
margin: 0;
padding: 10px;
}
<div class="container">
<div class="item">
<h1>HEADLINE</h1>
<p>Subhead</p>
</div>
</div>
An important note if you're using the excellent pseudoelement ::before/::after solution posted by Rashad Ibrahimov.
I found that I had to remove z-index from the parent element and apply it only to the pseudoelements and child elements before mix-blend-mode: multiply would work.
For example
#wrapper {
position: relative;
}
#wrapper .hoverlabel {
position: absolute;
bottom: 0;
left: 0;
right: 0;
/* z-index: 90; Uncomment this to break mix-blend-mode. Tested in Firefox 75 and Chrome 81. */
}
#wrapper .hoverlabel::before {
position: absolute;
content: "";
top: 0;
bottom: 0;
left: 0;
right: 0;
mix-blend-mode: multiply;
z-index: 90;
background-color: rgba(147, 213, 0, 0.95);
}
I have been trying to figure out how a pixel pattern overlay can be applied over a website section like in this site: http://www.tinkeringmonkey.com/ (over the background video image at top and image in bottom section)
I'm sure this is fairly straightforward, I just don't know what to google to try and find the css or whatever I need to implement it.
Thanks heaps for any replies!
David
If you inspect the website using your browser's developer tools you will see that they have simply included an empty div, scaled it to 100% width and height of it's container, positioned it absolutely, given it a higher z-index than the video container and used a tile-able background image to produce the diagonal lines you see. In this instance the class applied to the div is called mk-section-mask and the css applied to that class is...
.mk-section-mask {
background: url(../../images/video-mask.png) center center repeat;
position: absolute;
top: 0;
left: 0;
z-index: 3;
width: 100%;
height: 100%;
}
where video-mask.png is a 4px square png with a diagonal line running through it... See here
Hope that helps
Dan
Here take a look at this fiddle
With pseudo element :after, you can add a repeated background and make its position:absolute with top-left-right-bottom to zero.
CSS
div {
width: 300px;
height: 300px;
display: block;
position: relative;
background: url(https://placekitten.com/g/300/300);
}
div:after {
content: "";
background: url(http://dev.bowdenweb.com/a/i/style/patterns/tileables/06/dot-grid-1.png) repeat;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
opacity: 0.5;
}
In general, when you want to know how a certain effect or layout is achieved, try the web inspecting tools in your browser. I use Google Chrome to develop sites, it comes with a very complete tool set.
As for your specific question, there's several ways to attain this. If you want to apply this overlay to a non-void element, my approach would be using HTML pseudo-elements:
.overlay {
position: relative;
}
.overlay:after {
content: "";
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background: url(path/to/your/transparent/overlay.png) repeat scroll 0 0;
}
Apply the class overlay to whatever <div> and you're good to go. There's a catch, though: elements inside the .overlay won't respond to mouse/touch events, because the overlay on top will get them first.
I will give an example: Consider you have a div with an image for a background, you hover over it and some colour is added to the image, much like a filter, however it is a single colour (transparent as well so you can still see the original image. The filters in css3, atleast these which I have seen ( http://html5-demos.appspot.com/static/css/filters/index.html ) do not offer single color manipulation. Is such a thing achievable?
Things I have considered adding an element on top of the div (z index) and have a transparent background with some color appear on it when it is hovered on, but I wonder if it is possible with css3.
You can do something like this:
#the-div {
width: 500px;
height: 500px;
background: url(http://placekitten.com/500/500) no-repeat center center;
position: relative;
}
#the-div:hover:after {
content: ' ';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(0,0,0,.5);
}
See it in jsFiddle.