I am adding a section/block to my website. The font overlay does not look good with all background pictures. Sometimes it is hard to read the text. A slight blur will fix my issue. However, with my current code and all the variations I have tried, it applies to blur way above the text size. If I apply blur to just the text areas it does not make a perfect "square" and leaves the empty areas the original background color. Sort of a highlighter effect.
How do I make it so that it blurs only the box of text as a whole? I have been trying to get something that looks like what this guy has done: https://jordanhollinger.com/2014/01/29/css-gaussian-blur-behind-a-translucent-box/
My CSS code is:
* {
box-sizing: border-box;
}
beody {
margin: 0;
font-weight: 500;
font-family: 'HelveticaNeue';
}
esction {
width: 100%;
padding: 0 7%;
display: table;
margin: 0;
max-width: none;
background-color: #373B44;
height: 100vh;
background-image:url("https://s15.postimg.cc/999tzxuqz/test_banner.jpg");
background-repeat:no-repeat;
background-size:cover;}
section:nth-of-type(2n) {
background-color: #FE4B74;
background-image:url("https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350");
}
}
.einto {
height: 50vh;
}
.econten {
display: table-cell;
vertical-align: middle;
background: rgb(34,34,34); /* for IE */
background: rgba(34,34,34,0.75);
}
eh1 {
font-size: 3em;
display: block;
color: white;
font-weight: 300;
}
ep {
font-size: 1.5em;
font-weight: 500;
color: #C3CAD9;
}
ea {
font-weight: 700;
color: #373B44;
position: relative;
e&:hover{
opacity: 0.8;
}
Here is what is happening when I apply it as is:
https://postimg.cc/image/471owh7w7/
Your black <div> should have position: absolute, and you should in style use blur for it.
Inside that <div> will be another <div> with your text (content) and it should have position: relative and with a z-index that has a greater value than the black <div>.
Related
Currently, I have a background image, and a navbar which has its background blurred using backdrop-filter. The navbar links, when not hovered, look like this:
Not hovered
This is working correctly, but on hover this is what it should look like (this is from figma):
Hovered
I was attempting to use mix-blend-mode to create this knockout effect, however it seems that when using a combination of both backdrop filter on a parent and mix-blend-mode on a child the blending does not work. Here's what it looks like: Navbar link
Removing the blur effect makes the effect work, but the blur is important.
Here's the code:
Navbar.module.scss
.nav {
font-family: 'Kumbh Sans', sans-serif;
display: flex;
backdrop-filter: blur(16px);
border: {
top: none;
left: none;
bottom: 3px solid $fg;
right: 3px solid $fg;
}
* {
display: flex;
align-items: center;
padding: {
top: 1rem;
bottom: 1rem;
}
}
}
.link {
backdrop-filter: none;
font-size: 18pt;
color: $fg;
display: block;
text-decoration: none;
padding: {
left: 1rem;
right: 1rem;
}
&:hover {
background-color: $fg;
color: black;
mix-blend-mode: screen;
}
}
As the title says i am trying to make two h2 and span text boxes have a rectangular shape for a website and i need help.
mine's looks like this:
but i want them to look like this:
h2 {
position: fixed;
top: 20rem;
left: 11rem;
text-align: right;
font-size: 1rem;
}
h2 span {
background-color: #556272;
color: #fff;
display: inline-block;
text-align: center;
font-style: normal;
padding: 2rem;
}
h2 span:first-child {
width: 200px;
height: 44px;
font-size: 20px;
}
h2 span:last-child {
transform: translate(-1rem, -1rem);
width: 200px;
height: 44px;
font-size: 15px;
}
<h2>
<span>Web</span> <br />
<span>Development</span>
</h2>
Just my take, but it seems like it'd be easier and more readable to do something like this:
h2 div {
/* various styles for background and colors */
background-color: #ccc; /* just an example */
}
h2 div.first-line {
display: block;
max-width: 200px; /* or whatever */
margin-left: 200px;
}
h2 div.second-line {
display: block;
max-width: 200px; /* or whatever */
margin-left: 100px;
}
<h2>
<div class='first-line'>Web</div>
<div class='second-line'>Development</div>
</h2>
Removing Defauilt styling
Headers by default have more margin on the top. You just want to normalize your styling.
html, body {
margin: 0;
}
This should do the trick, as it removes all margins from all elements. Just put it at the top of your stylesheet. But there are also some normalize.css defaults out there that remove all unwanted default styling.
You can also change the styling on the element itself, or remove all styling from it:
h2 {
all: unset;
}
But usually removing all default styling like this is not what you want. I'm just saying it's an option.
I usually just start styling by starting from something like this:
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
body {
font-family: Roboto, 'Helvetica Neue', sans-serif;
background-color: #eee;
/* Some other defaults, like maybe flex attributes depending on your layout. */
}
Tip: When using the browser development tools, you can inspect each tag and see all the styling it has. Try changing / removing things in there, until you've found the culprit of your issues.
I'm trying to keep the unicode ace of hearts U+1F0B1 white with a green body background. I'm thinking that I need to create a div with the same size as the card and set that to white. Is there a better way to do this?
This is the sample way. but you need to adjust the "text-indent" and the "letter-spacing" depending on the font-size of the unicode.
See code below
body {
background: grey;
}
i {
position: relative;
display: inline-block;
}
i::before{
content: "\1F0B1";
font-style: normal;
color: white;
display: block;
line-height: 0.8;
font-size: 150px;
background: green;
letter-spacing: -10px;
text-indent: -10px;
}
<i class="heart"></i>
You can do it in a single HTML element as well, with a pseudo-class. Similar to how icon sets work these days.
i {
background: green;
font-style: normal;
padding: 2px 4px;
}
i::before {
content: "\1F0B1";
color: white;
}
<i class="heart"></i>
I have text that appears on top of an image when you hover over the image. Originally, I also had the entire image go opaque upon hovering.
Now I've decided I want to make only a section of the image go opaque upon hovering, the part with the text. I tried the tutorial here. Unfortunately, once I made those changes, nothing appears when I hover over the image -- not the text or any opaque filter.
Here is my html file:
<div class="container">
<div class="main">
<div class = "JFK">
<h6>JFK</h6>
<div class = "transbox">
<p> to
from</p>
</div>
</div>
/* continues on*/
Here is my css:
JFK {
position: relative;
left: 110px;
height: 300px;
width: 300px;
bottom: 40px;
background-image: url(https://media-cdn.tripadvisor.com/media/photo-s/03/9b/2d/f2/new-york-city.jpg);
line-height: 200px;
text-align: center;
font-variant: small-caps;
display: block;
}
.transbox{
margin: 30px;
background-color: $ffffff;
border: 1px solid black;
opacity: 0.6;
display: none;
}
.JFK h6{
font-size: 30px;
font-variant: small-caps;
font-weight: 600;
}
.transbox p{
position: relative;
top: -90px;
word-spacing: 100px;
font-size: 30px;
font-variant: small-caps;
font-weight: 600;
color: #c4d8e2;
display: none;
}
.JFK p a{
color: #c4d8e2;
top: -30px;
}
.JFK:hover transbox p {
display: block;
}
.JFK:hover{
display: block;
}
.JFK: hover transbox{
display: block;
opacity:0.6;
}
I thought I had added a wrapper class as suggested here by adding the transbox div. I also tried the background-color:rgba(255,0,0,0.5); trick mentioned here. No luck -- still nothing happens upon hover. Any suggestions?
Your problem lies with these 2 pieces of code in your css:
.JFK:hover transbox p {
display: block;
}
.JFK: hover transbox{
display: block;
opacity:0.6;
}
Firstly . is missing from the class transbox - is should be .transbox
Secondly there is a space between .JFK: and hover remove the space and it should all work.
.JFK:hover .transbox p {
display: block;
}
.JFK:hover .transbox{
display: block;
opacity:0.6;
}
Your code is not complete. In the "tutorial" you said you tried, <div class = "transbox"> is just a box with transparent background that is positioned above another box, with a background-image. You said you need "only a section of the image go opaque upon hovering".
Also, your CSS is not valid. "JFK" is a class, in the first row, so is ".JFK".
Then, is
.transbox {
margin: 30px;
background-color: #ffffff;
}
You wrote again with errors.
You can use:
.transbox{
margin: 30px;
background-color: rgba(255,255,255,0.6);
border: 1px solid black;
}
On this page I'm trying to position quote images around the block quote but they won't sit right.
This is the CSS:
blockquote {
padding-left:10px;
color:#444;
font-style: normal;
width: 500px;
background: #ff9999 url(/wp-content/themes/primus/primus/images/quoleft.png) left top no-repeat;
}
blockquote p {
padding: 0 100px;
background: #ff9999 url(/wp-content/themes/primus/primus/images/quoright.png) right bottom no-repeat;
}
I want to keep the images the same size ideally. I just want to make the text stop overlapping the images. I tried specifying the width of the .blockquote as 500px but it didn't seem to make any difference.
Any ideas would be welcomed. Thanks - Tara
Two things:
In order to see the images behind
the text you should not specify a
background color for the inner paragraph; make
it transparent instead.
The specified padding is not applied due to another property (.entry p) which is more specific. You could set this blockquote padding to !important but that's generally not recommended, another option is to make this one more specific than the other (.entry p) by adding the .entry class. Be aware that only blockquotes with a parent .entry class will be selected this way. (more info about specificity)
The css:
blockquote {
padding-left: 10px;
color: #444;
font-style: normal;
width: 500px;
background: #ff9999 url(/wp-content/themes/primus/primus/images/quoleft.png) left top no-repeat;
}
.entry blockquote p {
padding: 0 100px;
background: transparent url(/wp-content/themes/primus/primus/images/quoright.png) right bottom no-repeat;
}
Try adding this property:
.entry p {
margin: 5px 5px 5px 15px;
padding: 0px 40px 0px 0px;
line-height: 20px;
font-family: Tahoma,Georgia, Arial,century gothic,verdana, sans-serif;
font-size: 13px;
}
I managed to get the following:
Hope that helped (:
Depending on the browser support that you need, you can try it without images, using CSS:
blockquote {
padding: 0;
margin: 0;
border: 1px solid blueviolet;
}
blockquote:after,
blockquote:before {
color: #ccc;
font-size: 4em;
line-height: 0;
height: 0;
vertical-align: -0.5em;
display: inline-block;
}
blockquote:after {
content: "”";
margin-left: 0.05em;
}
blockquote:before {
content: "“";
margin-right: 0.05em;
margin-bottom: -0.5em;
}
Live example here
(Tested on Firefox and Chrome only)