I am looking for a design like the following screenshot for the section heading. ( The bottom line)
So far I could achieve
h1 {
position: relative;
text-align: center;
width: 100%;
}
h1:after {
content: '';
position: absolute;
width: 100px;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
bottom: 0;
border-bottom: 3px solid #8d8f90;
}
<h1 style="text-transform: none">How it works</h1>
Now I want the both end of the border-bottom to be shaped.
Example of using responsive background-image as requested in comments!
So im assuming that the border image will need to be that same length as the text, here is a working example:
div {
text-align: center;
}
h1 {
display: inline-block;
background-image: url(https://ded7t1cra1lh5.cloudfront.net/media/76045/a7fdf291661d9baab9b767d833c70183ba6ee3ce/original/divider-37709_1280.png?1448468523);
height: 120px;
background-repeat: no-repeat;
background-position: center;
background-size: cover/*contain*/
;
}
<div>
<h1 id="_1">I am a header</h1>
</div>
<div>
<h1 id="_2">I am a really really really really long header</h1>
</div>
So in this i grabbed a pretty large image from google as an example so it wouldnt be stretched at larger screen sizes. You will need to use #media screen command to alter the height of the header tag when the text breaks. However this will only be needed on longer headers, and if the header border needs to be the same length as the text. If it doesnt you can use a much shorter image and possibly change the size from cover to contain. The inline block makes it so the background image will always be the length of the text as well.
If you do decide to go this route some minor tweaking to the css should yield you acceptable results. Hope this is helpful as a back up solution Ramesh!
Related
The effect I am after here is to show the word "Introducing" in the before pseudo element for an h1 header that has its own content centered. My effort thus far is shown below
h1::before
{
font-size:0.7rem;
content:'Introducing';
position:absolute;
left:calc(50% - 6em);
top:-0.75em;
transform:rotate(-45deg);
}
h1
{
text-align:center;
position:relative;
margin-top:30px;
}
<h1>
Hello
</h1>
This works and, as far as I can tell, is responsive - the before pseudo retains its placement relative to its parent. However, I suspect that this is not the right solution. Hopefully, someone here can suggest a better way.
Your current solution is responsive about different screen sizes, but it isn't about different h1 lengths. A longer text will need a different position.
You can solve it make the width of h1 adjust to its content. And now, just position the pseudo on the upper left, center it with a translation and rotate it.
h1::before {
font-size: 0.7rem;
content: 'Introducing';
position: absolute;
top: -1em;
transform: translateX(-50%) rotate(-45deg);
}
h1 {
text-align: center;
position: relative;
margin: 30px auto;
width: fit-content;
background-color: cadetblue;
}
<h1>
Hello
</h1>
<h1>
Hello World
</h1>
I at least got the following to render the image, but when the window is resized past a certain point: part of the image gets cut off.
#header {
background-image: image-url('my_header.png'); #image-url is a helper in rails
background-repeat: no-repeat;
height: 100px;
background-size: 100%;
border-radius: 1em;
}
And then showing how I specify the image at the top of the body in application.html.erb:
<body>
<div id="header"></div>
</body>
What I want to happen is for the image to scale proportionality but not get cut off. I do not want any specific height set. I want it to automatically scale as needed (however, I wasn't able to get the image to render unless I specified the height with px).
#Pangloss deserves recognition for providing a fantastic answer at this jsfiddle which he referenced in the comments.
Here is his css:
#header {
background-image: url('http://i.imgur.com/zOZVQaf.jpg');
background-repeat: no-repeat;
background-size: contain;
border-radius: 1em;
border: 1px solid blue;
}
#header img {
display: block;
visibility: hidden; /*hidden but reserve the space*/
width: 100%;
height: auto;
}
And the html:
<div id="header">
<img src="http://i.imgur.com/zOZVQaf.jpg">
</div>
#Pangloss provided this answer in the comments. If/when he posts an answer to this question, I will switch it over to his answer.
I would like to make a transparent arrow over an image. This triangle should be indented in a block and show the background image.
Desired output:
I used skewX() property that #web-tiki had explained here but I want it to display on the top of the border rather than on the bottom of image and have this issue:
A fiddle demo of my code is available here
Can anyone tell me why it's not working in my case?
As stated in the question, your case is a bit different from the example that was provided by web-tiki. In the example that you were referring to, the border with the transparent cut was included as the bottom border for the image whereas you need it as the top border of the plain text area.
The expected output can be achieved with the same skew technique described in that answer. However, it needs to be tweaked a bit to match your case.
First thing is, the skewed pseudo-elements (that produce the border) should be added to the container of plain text area and not the top section which holds the image. This part you have already done correctly.
Next, you need to position the border such that even with the border the height of your text container will be equal to the other two images placed by its side. For this, you need to position the elements that form the border within the plain text container (top: 0%) instead of above it (bottom: 100% in your code).
Then, if the text container has a non-transparent background, you need to clip it such that it is not present behind the elements that is creating the border effect. This can be achieved by adding a padding-top on the text container equal to the height of the border pseudo-elements and then setting background-clip: content-box to it.
Finally, you need to move the entire bottom part up by the same number of pixels as the height of the border in order for the top image to be seen through the transparent cut out area. This can be done by adding a negative margin-top to the bottom container.
Putting it altogether your code should be similar to the below snippet to achieve the effect that you need. (Note: Your fiddle has way too much code and so I have created a simpler sample for the demo).
.section {
height: 200px;
width: 500px;
background: url(http://lorempixel.com/500/200/nature/3);
}
.bottom-container {
margin-top: -15px;
height: 100px;
width: 500px;
}
.text,
.middle-image,
.right-image {
float: left;
height: 100%;
width: calc(100% / 3);
}
.middle-image {
background: url(http://lorempixel.com/200/100/nature/2);
}
.right-image {
background: url(http://lorempixel.com/250/100/nature/1);
}
.text {
position: relative;
box-sizing: border-box;
height: 100%;
padding-top: 15px;
text-align: center;
line-height: 85px;
background: #F7F7F7; /* Just for demo */
background-clip: content-box; /* needed only if your background is not transparent */
overflow: hidden;
}
.text:after,
.text:before {
position: absolute;
content: '';
top: 0px;
height: 15px;
background: rgb(215,182,115);
}
.text:before {
left: 0px;
width: 25%;
transform-origin: left bottom;
transform: skew(45deg);
}
.text:after {
right: 0px;
width: 75%;
transform-origin: right bottom;
transform: skew(-45deg);
}
<!-- prefix free library to avoid browser prefixes in CSS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<section class="section">
</section>
<div class="bottom-container">
<div class="text">Some text</div>
<div class="middle-image"></div>
<div class="right-image"></div>
</div>
Screenshot:
Note: The images that are displayed when the snippet is executed could be different from those in the screenshot because they are random placeholder images
I need to dynamically display 2 graphic image files that represent opening and closing quotes as shown below in the sample screen shot.
The quotes need to appear just to the left and to the right of the upper content block as shown. Content block widths will vary on the page.
I have tried float and background image. Does anyone have a tip or trick to properly, dynamically and flexibly position 2 image files?
Here is what I have so far after working with #Utkanos answer:
HTML
<div class="postsPage_item_content postsPage_item_quote"><?php the_content();?></div>
CSS
div#maincontentcontainer div#primary div div.postsPage_item_content {
position: relative;
text-align: center;
}
div#maincontentcontainer div#primary div div.postsPage_item_quote::before, div#maincontentcontainer div#primary div div.postsPage_item_quote::after {
background-image: url('../images/QUOTE1.png');
content: '';
display: block;
left: 20%;
height: 28px; /* background-image natural height is 28px */
position: absolute;
top: calc(50% - 50px);
width: 36px; /* background-image natural width is 36px */
}
div#maincontentcontainer div#primary div div.postsPage_item_quote::after {
background-image: url('../images/QUOTE2.png');
left: auto;
right: 20%;
}
Display
Desired results are that (1) each of the dynamically rendered quotes align with the top of the content block, and (2) the quotes dynamically position with margin padding to the left and right of the content block as shown by the red arrows.
Pseudo elements are perfect for this sort of thing.
HTML:
<div id='my_div'>
<p>Content here.</p>
<p>Etc.</p>
</div>
CSS:
#my_div {
position: relative;
}
#my_div::before, #my_div::after {
content: '';
width: 50px;
height: 50px;
position: absolute;
display: block;
background: url('path/to/open_quote_img.png');
left: 5%;
top: calc(50% - 25px);
}
#my_div::after {
background: url('path/to/close_quote_img.png');
left: auto;
right: 5%;
}
That code assumes your quote graphics are 50px in width and height - modify as required.
Finally, to ensure your content doesn't overlay the quote images, set an appropriate padding-left and padding-right on the container (in my example, the div) so the content is sufficiently pushed in away from them.
Another possibility is using absolute positioning inside a relative container. For example:
.container { width:300px; position:relative;padding:20px}
.left-quote {position:absolute; top:10px; left:10px; font-size:30px;}
.right-quote {position:absolute; bottom:20px; right:10px; font-size:30px;}
<div class="container">
<span class="left-quote">"</span>
<span class="right-quote">"</span>
<p>is one of the smartest and most dedicated people that I know... he helped the company achieve incredible share of voice in key publications such as...</p>
</div>
I am using transform: skew to create the effect of a down arrow on my banner image using both the :before and :after tags. The result should look like the following:
However, in IE 9-11 there seems to be a rounding issue. At some heights there is one pixel from the background image that shows below the skewed blocks resulting in the following:
In my case, the banner is a percentage of the total height of the window. Here is the some sample code which should be able to reproduce the problem:
HTML
<div id="main">
<div id="banner"></div>
<section>
<h1>...</h1>
<p>...</p>
</section>
</div>
CSS
#banner {
position: relative;
background-color: green;
width: 100%;
height: 75%;
overflow: hidden;
}
#banner:before,
#banner:after {
content: '';
display: block;
position: absolute;
bottom: 0;
width: 50%;
height: 1.5em;
background-color: #FFFFF9;
transform: skew(45deg);
transform-origin: right bottom;
}
#banner:after {
right: 0;
transform: skew(-45deg);
transform-origin: left bottom;
}
body {
background-color: #333;
position: absolute;
width: 100%;
height: 100%;
}
#main {
max-width: 40em;
margin: 0 auto;
background-color: #FFFFF9;
position: relative;
height: 100%;
}
section {
padding: 0 1em 5em;
background-color: #FFFFF9;
}
And here a working example.
Yes, seems to be a rounding issue – and I don’t know of anything that one could do to fix this. It’s in the nature of percentage values that they don’t always result in full pixel values – and how rounding is done in those cases is up to the browser vendor, I’m afraid.
I can only offer you a possible workaround (resp. “cover up”) that seems to work – if the layout really is as simple as this, and the main content area has a white background, and no transparency or background-image gets involved there.
Pull the section “up” over the banner by a negative margin of -1px (eliminated top margin of h1 here as well, otherwise it adjoins with the top margin of the section – countered by a padding-top), so that its background simply covers up that little glitch:
section {
padding: 1em 1em 5em;
background-color: #FFFFF9;
position:relative;
margin-top:-1px;
}
section h1:first-child { margin-top:0; }
Well, if you look closely, that makes the corner of triangle look slightly “cut off” (by one pixel) in those situations where the rounding glitch occurs – if you can live with that (and your desired layout allows for it), then take it :-) (And maybe serve it to IE only by some means). If not – then sorry, can’t help you there.