I'm creating a homepage using HTML/CSS/Javascript, on this page I have text floating on the top left portion of the screen. I have a number of backgrounds saved from Reddit and a script which randomly selects one upon start, my problem is that because this background can be any colour it is difficult for the text to be readable, so my idea was to blur the background around just the text in order to make it readable. Ideally, it would follow just the text and blur the outline of it but I tried placing it in a box, however, because it uses relative layout it was difficult to have the box fill and blur the minimum space possible.
How can I improve the readability of text by blurring the background just around the text? I'm also open to other suggestions to improve readability (remembering the background changes)
Try using the CSS3 filters: https://www.inserthtml.com/2012/06/css-filters/
The link above should have a guide on how to blur image and you should be able to modify this to fit your requirements.
You have chosen the difficult way. Simply use CSS text-shadow Property. For example if the text is in black, use white shadow color for it.
Example:
body {
background-image: url('https://images.template.net/wp-content/uploads/2015/09/01191816/Perfect-Summer-Background-Free-Download.png');
background-size: cover
}
.text {
color: #000;
font-size: 3em;
text-shadow: 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff
}
<div class="text">Some Text</div>
It's a quick n dirty fix... but I usually just add a contrast background color to the text wrapper (like the first one in the example below). You can also use blur filter if you want. I referred to this article frosting glass css filter for the second one. But in the comment of that article, some say there's a trade off of performance.
#bg {
background: url(https://picsum.photos/500/400?image=0) center center no-repeat;
background-size: cover;
width: 500px;
height: 300px;
margin-bottom: 30px;
}
#text-wrap1 {
padding: 30px;
background-color: rgba(255,255,255,0.7);
text-shadow: 1px 1px 1px white;
width: 150px;
}
#text-wrap2 {
padding: 30px;
width: 150px;
position: relative;
}
#text-wrap2 p {
position: relative;
text-shadow: 1px 1px 1px white;
}
#text-wrap2:before {
content: '';
display: block;
width: 100%;
height: 100%;
background-color: white;
position: absolute;
left:0;
top:0;
-webkit-filter: url('#blur');
filter: url('#blur');
-webkit-filter: blur(5px);
filter: blur(5px);
background-size: cover;
opacity: 0.7;
}
<div id="container">
<div id="bg">
<div id="text-wrap1">
This is a random paragraph
</div>
</div>
<div id="bg">
<div id="text-wrap2">
<p>This is a random paragraph</p>
</div>
</div>
</div>
Related
`
/* Button */
.button {
margin: 1em 0em;
}
.circle {
width: 50px;
height: 50px;
border-radius: 50%;
background: #1A718A;
position:relative;
}
.button h3{
position:relative;
top:3.4em;
left:.5em;
color: white;
font-weight: 400!important;
font-size:.9em!important;
z-index: 1;
}
.circle:hover {
position:relative;
top:1em;
left:3em;
}
<div class="button">
<div class="text"><h3>- View <span>Work</span></h3></div>
<div class="circle"></div>
</div> <!--button-->
`How do I create this hover button Using HTML, css and javascript.
The circle moves to the right(no effects) whilst the view turns grey and the work turns white(inverse).
Also a code newbie :)
Default State
Hover state
Thankyou
Recreation
HTML
We want to animate an element and its text "- View Work", so the simplest HTML we can have is:
<p>- View Work</p>
Styling
Default style
We can then style it as much as necessary. To place the line in the middle, we can trick a little by setting line-height to the element's height with a bit of JavaScript:
const p = document.querySelector('p');
p.style = '--height:' + getComputedStyle(p).getPropertyValue('height');
p {
position: relative;
border: 1px solid black;
color: black;
background-color: #f3f3f3;
width: 14rem;
height: 10rem;
font-weight: bold;
font-family: sans-serif;
text-align: center;
line-height: var(--height);
text-transform: uppercase
}
<p>- View Work</p>
With flashlight-effect
Now we want to add the circle, in which the text's color is different.
We could probably use mix-blend-mode in some way, however I don't understand it well enough to make it work with it.
Because of that, we fall back to using pseudo-elements (more specifically, ::after).
The pseudo-element needs to ...:
... have the same text in a different color, and have the texts overlap
... be big enough to fit the revealing circle in all its positions inside
... clip out the rest not inside the revealing circle
The first two bullet points are as simple as styling the pseudo-element and the parent mostly the same way.
To get the text, we can again use JavaScript by setting a custom data-attribute (e.g. data-text) to have the text. The pseudo-element can then display the text with content: attr(data-text).
For the revealing circle, we give the pseudo-element a background-color. Then, we use clip-path to cut out what should be "revealed".
And on hover, we transition between two different positions of the revealing circle.
const p = document.querySelector('p');
p.dataset.text = p.innerText;
p.style = '--height:' + getComputedStyle(p).getPropertyValue('height');
p {
position: relative;
border: 1px solid black;
color: black;
background-color: #f3f3f3;
}
p, p::after {
width: 14rem;
height: 10rem;
font-weight: bold;
font-family: sans-serif;
text-align: center;
line-height: var(--height);
text-transform: uppercase
}
p::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
color: white;
background-color: #1A718A;
clip-path: circle(3rem at 70px 55px);
transition: clip-path 0.15s;;
pointer-events: none;
}
p:hover::after {
clip-path: circle(3rem at 155px 100px);
}
<p>- View Work</p>
End note
This sample-code only works for one-liners, and requires the element to have a fixed size.
The effect can also be achieved by using mostly JavaScript, where one could mock-up such
a pseudo-element with actual HTML-elements, and then overlay said element over the original.
This idea comes from the idea of an arcade cabinet. Let's say you have 2 layers in a project. Layer 1 with z-index of -1 has a background of blue. I want the upper most div to be black with the inner area of the div to be semi-transparent, similar to a window on an arcade cabinet. How would I solve this issue?
To give you an idea it would look like:
Arcade Cabinet Screen
Here you are:
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
perspective: 1000px;
}
#s {
border-radius: 7vh;
width: 102vh;
height: 77vh;
box-shadow: 0 0 0 50vw #000;
transform: rotateX(-3deg);
background: linear-gradient(0, rgba(0, 0, 0, .3) 1px, transparent 0) 0 / 1px 3px, url(https://picsum.photos/800/600) 0 0 /cover
}
<div id="s"></div>
You can't do that... in the way you want. You would need to have multiple layers compose the "cabinet" facade. These would sit on the top. The blue could be in the background at -1. If you wanted to then have the "semi-transparent" part in there, then that would probably be a separate layer.
The facade below is in four "pieces": top, right, bottom, left. The screen itself sits in one layer. The glare sits in another.
.screen{
z-index:-1;
right:0;top:0;left:0;bottom:0;
background-color:blue;
position:absolute;
}
.screen div{
margin-top:90px;
color: yellow;
text-align: center;
font-family: fantasy;
}
.piece{
z-index:1;
background-color:black;
position:absolute;
}
.top{
height:4%;width:100%;
top:0;left:0;
}
.bottom{
height:4%;width:100%;
bottom:0;left:0;
}
.right{
height:100%;width:2%;
top:0;right:0;
}
.left{
height:100%;width:2%;
top:0;left:0;
}
.glare{
z-index:0;
background: radial-gradient(75% 35%, rgba(200,200,200,0.5), rgba(240,240,240,0.3));
right:0;top:0;left:0;bottom:0;
position:absolute;
}
<div class="top piece"></div>
<div class="right piece"></div>
<div class="bottom piece"></div>
<div class="left piece"></div>
<div class="glare"></div>
<div class="screen">
<div>press any button to continue...</div>
</div>
Try using three layers.
The Screen can be blue and behind that you have a big black div as the screen frame. On top of the screen you can put a transparent div.
The problem you'd face when using two divs is that the frame of the screen would look grey instead of the desired black effect.
To accomplish what you want, you need to think of layering in a different manner then how an arcade machine is built.
The black screen bezel is the lowest layer (#bezel)
The screen is the middle layer (#screen)
The overlay is the top layer (#overlay)
#bezel,
#overlay,
#screen {
height: 240px;
width: 256px;
}
#overlay,
#screen img {
border-radius: 20px;
}
#bezel {
background-color: black;
padding: 50px;
}
#overlay {
z-index: 2;
position: absolute;
background-color: rgba(0, 0, 255, 0.4);
}
<section id="bezel">
<section id="overlay"></section>
<section id="screen">
<img src="https://www.mobygames.com/images/shots/l/116293-rad-racer-ii-nes-screenshot-driving-off-into-the-sunset.png" />
</section>
</section>
I'm trying to create a World Cup 2018 page using the design that was used in the world cup 2018 qualification european zone (using the image that i've attached).
Please correct me if i'm wrong for some of these points:
In the EUROPEAN ZONE title, i can achieve this with a trapezoid rounded border.
For the title banner, it is using an uneven border div. This will have the same div alongside with the country names. I've tried using border-radius with the / operator maybe there is a better solution (if there is).
And also if you can see there is a small lens flare (not sure if that is the correct term) on top of the div.
For all the banner div i can put some gradient background color to make it look it has a 3D effect and add some glossy effect.
For the dark transparent background i can do it the same with border-radius. maybe with some concave border using the :after selector.
This part is where i'm stuck: I'm not sure how to recreate the country flags that has a convex shape but it looks like wrapping the div (maybe add a box-shadow effect) and add a glossy effect.
I'm assuming I can achieve this with CSS only, or maybe a little bit of Javascript. But no jQuery because I'm planning to create this in react.
Here's what I've got so far:
body {
background: white;
}
#wrapper {
border: 1px solid black;
border-radius: 20px 20px 40px 40px / 40px 40px 90px 90px;
display: flex;
height: 40px;
align-items: center;
}
#flag {
width: 70px;
height: 100%;
background: red;
border-radius: 20px 20px 40px 40px / 40px 40px 90px 90px;
margin: 0 20px;
}
#flag:after {
content: '';
background: white;
position: relative;
height: 100%;
width: 30px;
display: block;
left: 44px;
border-radius: 20px 20px 40px 40px / 40px 40px 90px 90px;
}
<div id="wrapper">
<div id="flag"></div>
<div id="team">Country Name</div>
</div>
View on JSFiddle
Note: I guess the title of my question is nothing to do with my real question (kinda).
Here is my code:
.one{
background-color: gray;
}
.two{
padding: 20px;
}
<div class = "one">
<div class = "two">
<span>something</span>
</div>
</div>
<br>
<div class = "one">
<span>something</span>
</div>
I need to manage it how those two blocks look like the same. In reality, div.two isn't exist in the first of time and it will be added after a while. So I want to keep the UI without any change when div.two appends. How can I do that?
In conclusion, I need to have the same look for both div.one elements at the same time. Is that possible? (noted that I want to both of them be like the first one)
Is it possible to use visibility: hidden; instead of appending a new one? Instead of appending just change to visibility: visible;
.one{
background-color: gray;
}
.two{
visibility: hidden;
padding: 20px;
}
https://jsfiddle.net/Hastig/bx2kwjmw/
Alternatively can you add padding to the parent element instead...
.one{
background-color: gray;
padding: 20px;
}
.two{
}
https://jsfiddle.net/Hastig/bx2kwjmw/1/
Edit, I was playing around with this some more and saw that the padding on parent div isn't a solution as once you insert text the height still increases because of that text size.
Here's a new fiddle showing how to put in invisible ghost text as a placeholder for sizing, then remove it when you append content with your plugin.
It's just one idea, should be lots of ways to go about it..
https://jsfiddle.net/Hastig/bx2kwjmw/5/
$('.plugin-append-simulator').click(function() {
var content = '<div class="two">something</div>';
$('.one').html('').append(content);
});
// $('.one') | selects .one
// .html('') | removes ghost text
// .append(content) | appends your content
.one {
background-color: gray;
padding: 20px;
color: hsla(0, 0%, 0%, 0);
}
.two {
color: hsla(0, 0%, 0%, 1);
}
/* scaffolding. ignore this */.plugin-append-simulator { position: fixed;bottom: 0;left: 50%; transform: translateX(-50%);display: inline-flex;padding: 3px 8px 1px 8px;color: white;background-color: black;cursor: pointer;
}.plugin-append-simulator:hover { background-color: red; }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="one">ghost text</div>
<!-- ignore, scaffolding -->
<div class="plugin-append-simulator">simulate plugin append</div>
older version that toggles padding from parent to child..
https://jsfiddle.net/Hastig/bx2kwjmw/6/
Change where the padding is applied....
.one{
background-color: gray;
padding: 20px;
}
.two{
padding: 0; /* setting this to 0 should override any previous padding declarations*/
}
I have a square with a logo inside. On hover in the square, I want the background color to change as well as the color of the logo.
I have the following code:
<div class="pure-u-1 pure-u-md-1-3">
<div class="project", id="project1">
</div>
</div>
.project {
background-color: #f5f4f4;
margin: 0 0.5em 2em;
padding: 4em 4em;
}
#project1:hover {
background-color: red;
}
I can get the logo to change on hover and I can get the square to change, but I can't get them to both change at the same time, i.e. when the mouse touches the square.
I'm assuming this needs javascript, which I do not know. Any tips/help is greatly appreciated.
No JavaScript required, just CSS. No need for an <img> either.
<div class="logo">Brand Name</div>
.logo {
width: 80px;
height: 78px;
text-indent: -9999em;
background-image: url('http://s17.postimg.org/7hltqe5e3/sprite.png');
background-repeat: no-repeat;
background-position: 0 0;
background-color: blue;
}
.logo:hover {
background-color: red;
background-position: -80px 0;
}
http://jsfiddle.net/12u7ma2q/
Create a sprite with both versions of the logo side-by-side. When you hover you will change the background color and shift the position of the sprite image (left, right, up, down - depends on how you created your sprite).
The benefits to this answer over sailens is that you're not using invalid markup (<img> without a src attribute) and you're only making a single request for an image instead of two. Oh, and less markup - a single <div> (which could be an <a>, <span> etc).
You could also shorten .logo by using background instead of individual background properties. I listed them out at first for clarity.
.logo {
width: 80px;
height: 78px;
text-indent: -9999em;
background: blue url('http://s17.postimg.org/7hltqe5e3/sprite.png') no-repeat 0 0;
}
http://jsfiddle.net/12u7ma2q/1/
Cleaner HTML (since img tag needs a source, you can change it for a div):
<div class="pure-u-1 pure-u-md-1-3">
<div class="project", id="project1">
<div class="pure-img">
</div>
</div>
And the CSS:
.project {
background-color: #f5f4f4;
margin: 0 0.5em 2em;
padding: 4em 4em;
}
#project1:hover {
background-color: red;
}
.pure-img{
background-image: url(http://dummyimage.com/600x400/000/fff);
width: 80px;
height: 78px;
}
#project1:hover .pure-img {
background-image: url(http://dummyimage.com/600x400/666/0011fc);
}
and the fiddle
http://jsfiddle.net/h6gwwox6/1/