I was trying make a transparent text background and the background should fill as far as any character goes.
If I use display:inline-block both line gets the same background width so filling text background effect is missing and that's not what I am trying to achieve.
getting on top one another can be fixed by increasing line height, or setting the line height normal but that makes huge gap between lines. Well I would like to have both line very close. which in this case is 55px line height with font-size of 47px.
Markup here:
.main {
width: 500px;
margin: 100px auto;
background: green;
padding: 30px;
}
.test {
width: 450px;
}
.main h2 {
color: #ffffff;
font-size: 47px;
line-height: 55px;
}
.main h2 span {
background: rgba(0, 0, 0, 0.2);
}
<div class="main">
<div class="test">
<h2><span>A title about your dream kitchen</span></h2>
Read MOre
</div>
</div>
Check in jsfiddle: http://jsfiddle.net/srmahmud2/ze4kpmuy/
not sure can I make you understand or not. here a screenshot for quick look
http://postimg.org/image/efnmpoiy1/
Another option, using drop shadows, courtesy of this blog. Here is the style for the .main h2 span:
.main h2 span {
background: rgba(0, 0, 0, 0.2);
box-shadow: 10px 0 0 rgba(0, 0, 0, 0.2),
-10px 0 0 rgba(0, 0, 0, 0.2);
}
jsfiddle: http://jsfiddle.net/slushy/mu8rwcjp/
Related
I am trying to upload an image on our webpage (https://www.palousebicycle.org/team.html) so that the person's face isn't cut off, while keeping the others the same (it is the last image).
I tried inline html:
#staff2 {
border: 10px solid white;
width: 45%;
min-width: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.staff img {
border-radius: 50%;
width: 228px;
height: 228px;
object-fit: cover;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.staff figure {
display: inline-block;
padding: 30px 40px;
text-align: center;
}
#nick {
position: absolute;
top: -30px;
left: -30px;
align: top, left;
}
<img "#nick" src="pictures/nick.jpg" alt="Nick" align="left,top">
as well as assigning an image #id (#nick) and using the CSS properties "align", "left", and "top".
I also tried using a frame on the picture to move it top-left, but I couldn't get the image in the right place to not show the frame.
We are a small nonprofit, and it's been awhile since I wrote the webpage, so forgive me for being a bit rusty, and probably not asking the question correctly. Please let me know any other information or files I can post, and thank you so much for any help! I really appreciate your time and assistance!
I would first suggest that you simply crop the image to a 228px by 228px square with the person centered appropriately in the image. That would give you the most control in terms of the way the image is cropped.
If you want to do it with css, you can do something like this:
#nick {
background-image: url(https://www.palousebicycle.org/pictures/nick.jpg);
background-size: 300%;
border-radius: 50%;
width: 228px;
height: 228px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
<div id="nick"></div>
Displaying the image with the background-image css property instead of with html <img> tag allows you to better control the way it is cropped. In this case, I just added a background-size: 300% which sized the background appropriately to fit the face in the circle.
Maybe you must replace ("#nick") to (id="nick") in img component.
I have an img tag and I want to add another gradient div layer on top of it ( that gradient div will have text).
Something like this :
I already know that I can do this with linear-gradient but I don't want that becuase not all mobile versions supports this feature.
Also - I've already seen that it can be achieved via box-shadow with inset
But it's not the same. I only want top and bottom gradient - without any differences on the edges. ( just like in my first picture here ^)
This is what i've tried : JSBIN
But again , I don't want the edges to be darker. I want only the strip in the red rectangle to be from left to right.And also - symmetric - in the bottom ( same gradient should be at the bottom).
Question
How can I fix my code to achieve straight-equal gradients in top and bottom without using linear-gradient ?
NB
I need to add text on that gradient div ( text is from DB) . So It can not be a pseudo ::before/::after element div.
By using multiple shadows you can target the sides you want.
Here done setting the spread radius (4:th parameter) of the blur to a negative value, keeping it from spreading along the sides, and use the horizontal and vertical offset of the shadow to, in this case, target only the top and bottom.
.innerDiv
{
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
background :transparent;
opacity:1;
border:solid 1px red;
padding:5px;
z-index:92299;
box-shadow:
inset 0 50px 50px -40px rgba(0,0,0,1),
inset 0 -50px 50px -40px rgba(0,0,0,1);
}
<div style='position:relative;border:solid 1px lightgray;height:400px'>
<div class='innerDiv'>
Some text
</div>
<img src='http://blog.caranddriver.com/wp-content/uploads/2015/11/BMW-2-series.jpg' height="400px" />
</div>
Based on earlier comments, here is a pseudo element version producing the exact same result, and by using the CSS attr() avoiding the issue of compile time data in the CSS.
I also added a script to show the text can be added dynamically as well.
window.addEventListener('load', function() {
var div = document.querySelector('div');
var text = div.getAttribute('data-text');
div.setAttribute('data-text', text + ', and this were added dynamically using script');
})
div
{
position:relative;
}
div::after
{
content: attr(data-text);
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
background :transparent;
opacity:1;
border:solid 1px red;
padding:5px;
z-index:92299;
box-shadow:
inset 0 50px 50px -40px rgba(0,0,0,1),
inset 0 -50px 50px -40px rgba(0,0,0,1);
}
<div style='position:relative;border:solid 1px lightgray;height:400px' data-text="Some text set using an attribute in the markup">
<img src='http://blog.caranddriver.com/wp-content/uploads/2015/11/BMW-2-series.jpg' height="400px" />
</div>
As I also suggested in comment that if you can achieve this using pseudo elements as ::after and ::before of your img container DOM element.
You can define the pseudo elements and then play with the box-shadow to replicating that gradient effect.
Here I have made some changes in your DOM structure as:
Code Snippet:
.img-container {
position: relative;
}
.img-container img {
max-width: 100%;
}
.img-container::after,
.img-container::before {
content: "";
display: inline-block;
position: absolute;
left: 0;
right: 0;
width: 100%;
height: 50px;
}
.img-container::before {
top: 0;
-webkit-box-shadow: 0px 25px 16px -10px rgba(0, 0, 0, 0.5) inset;
box-shadow: 0px 25px 16px -10px rgba(0, 0, 0, 0.5) inset;
}
.img-container::after {
bottom: 0;
-webkit-box-shadow: 0px -25px 16px -10px rgba(0, 0, 0, 0.5) inset;
box-shadow: 0px -25px 16px -10px rgba(0, 0, 0, 0.5) inset;
}
<div class="img-container">
<img src='http://blog.caranddriver.com/wp-content/uploads/2015/11/BMW-2-series.jpg' height="400px" />
</div>
(using the answer of #vivekkupadhyay as example) you could just make an overlay div and give this the inset shadow. Then you can add whatever content you want.
.img-container,
.img-overlay {
position: absolute;
top: 0;
left 0;
}
.img-container {
overflow: hidden;
}
.img-container img {
max-width: 100%;
}
.img-overlay {
width: 120%;
height: 100%;
-webkit-box-shadow: inset 0px 0px 25px 5px rgba(0,0,0,0.75);
box-shadow: inset 0px 0px 25px 5px rgba(0,0,0,0.75);
margin-left: -25px;
padding: 0px 30px;
color: white;
}
<div class="img-container">
<img src='http://blog.caranddriver.com/wp-content/uploads/2015/11/BMW-2-series.jpg' height="400px" />
<div class="img-overlay">
some text
</div>
</div>
EDIT: you could also make two seperate overlay div's for top and bottom if you want the to both have content, but this is just a quick example.
I have a div with 0.5 transparency. This acts as a darkening rectangle over a bigger background slider image (an outer div) to make the text more readable over the slider background picture.
<div class="darken-rectangle">
<!-- inner text container divs go here -->
</div>
CSS:
.darken-rectangle {
padding: 30px 30px 30px 30px;
background-color: rgba(0, 0, 0, 0.5);
}
This works great, however I would like to a few pixel (3px-6px) gradient border for the rectangle which drives the alpha from the outer light to the inner darken.
Unfortunately I can not find how to do this, even does not know is it possible with pure CSS, or do I have to create 4 png images for the 4 "border and arrange the layout?
I think what you want is box-shadow, see jsFiddle
HTML
<div class="darken-rectangle">
Test Text
</div>
CSS
.darken-rectangle {
/* ... */
background-color: rgba(0, 0, 0, 0.5);
color: white;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 1);
}
.darken-rectangle {
padding: 30px 30px 30px 30px;
background-color: rgba(0, 0, 0, 0.5);
box-shadow: 0px 0px 5px rgba(0, 0, 0, 1);
border-radius: 3px;
}
In our website we have got this button:
Now we need to create link from that but without this tape on top of it.
The problem is that it also creates link in empty space (top left corner of tape).
What we tried
Make the tape straight and rotate it with CSS. It is quite good, except the thing that it is not supported in older browsers. Also it would be better to keep that link just in that white space (container div).
HTML
<div class="box-body buttons-text clearfix">
<a href="#">
<div class="tape"></div>
<img src="/images/fire.png" class="left">
<span>HOT JOB</span>
</a>
</div>
CSS
.box-body {
padding: 10px 20px;
position: relative;
background: #ffffff;
-webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
}
.tape {
background: url("../images/tape.png") center 0 no-repeat;
width: 145px;
height: 54px;
position: absolute;
bottom: 46px;
left: 83px;
}
The problem is that it also creates link in empty space (top left corner of tape).
For modern browsers, you could use pointer-events:
.tape {
pointer-events: none;
}
You can use image map.
Use the button as an image.
Then use a correct image-map to define clickable area of the image.
I'm honestly not sure where to begin on this one (I'm a graphic designer digging a bit deeper into HTML/CSS, but my current experience is rather slim, so this problem is beyond my ability at the moment):
In part of my newest site design I've broken up sections of the site with banded shades: sections alternate between having the standard page background and applying a 10% black transparency overlay, which serves to distinguish the next section.
The problem is that every new section is supposed to have a block of three centered arrows cut out of the darker (or lighter) shade above, like so:
I know how I could manage this with images, but since the background is a repeating pattern that solution doesn't really work.
Any advice/tips that could help me solve this problem? Basically, all light sections need to begin with three arrows of 10% black transparency, and all dark sections need to begin with three arrows cut out of the 10% transparency background.
Is there an HTML/CSS based way to do this?
Container with trapezoid top border
Trapezoid:
I add the desired border on the top with a pseudo-element ::before.
Choose to display this content as a block this way it gets the size of its container.
Positioned this element relative so it is not displayed inside its container. position:relative; & top: -30px;
The border got a static 30px, and that's why its displayed -30px higher so its exactly above our .cut-out.
Transparency:
Setting the color with rgba() lets you set the opacity of the color.
So rgba(0,0,0, 0.1) sets the container/trapezoid to have a opacity of 10%. where a last value of 1 would equal 100% opacity. (Where you would use rgb() instead)
body {
margin: 0;
}
main {
background-color: rgba(0, 0, 0, 0.1);
}
.cut-out {
display: inline-block;
float: left;
background-color: rgba(0, 0, 0, 0.1);
width: 100px;
height: 150px;
margin: 40px 0 0 0;
}
.cut-out::before {
content: "";
border-bottom: 30px solid rgba(0, 0, 0, 0.1);
border-left: 30px solid transparent;
border-right: 30px solid transparent;
display: block;
position: relative;
top: -30px;
}
.stop {
clear: both;
}
<main>
<div class="cut-out">Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, </div><!--
--><div class="cut-out" style="width:150px;">Lorem ipsum dollar si amet, </div><!--
--><div class="cut-out" style="width:250px;"></div><!--
--><div class="cut-out"></div>
<div class="stop"></div>
</main>
Here's a fiddle that should help you out. This is done using simple CSS, and I'm just illustrating it here. You can adapt this to match your needs.
Sample HTML:
<div class="cutout"></div>
And the CSS
.cutout {
width: 100px;
height: 0px;
background: none;
border-bottom: solid 30px rgba(0, 0, 0, 0.1);
border-right: solid 30px transparent;
border-left: solid 30px transparent;
border-top: solid 0 transparent;
}
This will give you one of the elements to be repeated. To get some understanding of how this works, check out the following CSS in the updated fiddle:
.cutout {
width: 100px;
height: 100px;
background: rgba(0, 0, 0, 0.05);
border-bottom: solid 30px rgba(0, 255, 0, 0.1);
border-right: solid 30px rgba(0, 0, 0, 0.05);
border-left: solid 30px rgba(0, 0, 0, 0.05);
border-top: solid 0 rgba(0, 0, 0, 0.05);
}
Basically, we're assigning transparent color to the right and left borders, and giving the div a height of 0. This means only the bottom border remains visible, and a trapezoidal shape is formed because of the border width.
Edit: Looks like the links posted by #Myke showcase this already, I recommend playing around with code like this until you get a good idea of how to render similar shapes.