I created a featured block with HTML5 and CSS3. This block includes a background-image and some text heading. You can see it live here: http://codepen.io/anon/pen/yNWxBb
As you can see I am now using margin-top to center the text in the vertical middle of the block. And make use of the pseudo-class ::after to add a transparant dark overlay above the background-image.
I know you can vertical align a div using table in combination with table-cell and vertical-align: middle, but than it messed my markup.
Does anyone know how to fix this? And is this the right markup to do this? Or should you recommend an other markup and manner to add the transparant background to the image?
Look out to you answer/advice.
Thank you in advance.
Two possible solutions to your problem:
http://www.smashingmagazine.com/2013/08/absolute-horizontal-vertical-centering-css/
http://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/
And yes, you might want to alter the markup in order to make this possible but both articles I'm pointing you to come with example code.
I do believe this is your solution. Just replace this class in your css and it will work fine I guess.
.features figcaption header {
position: absolute;
top: 50%;
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
margin-left: auto;
margin-right: auto;
font-size: 24px;
line-height: 34px;
color: #FFF;
//position: absolute;
//top: 28%;
}
Related
I want to show a text with vertical orientation, but, all examples I find on the internet display the text vertically, but like it was written from up to bottom
I want exactly the opposite
I combine writing-mode with text-orientation, but I can't get the result I want
Thanks in advance,
Rafael
You can try use transform and rotate
.word {
margin: 50px -30px;
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
background-color: whitesmoke;
width: 100px;
text-align: center;
}
<div class="word">hello world</div>
More about how to use this here
I did it
Just used transform
transform: rotate(-90deg)
Which is the same as rotating 270deg
Is it possible to cut a triangle from a <div> like in the picture below?
The background is actually not just colour, but in my case is a blurred picture, so I can’t simply cover the green <div> with a brown triangle image. Is there some other CSS way to achieve this effect? Thanks.
The illusion of it is possible: http://jsfiddle.net/2hCrw/4/
Tested with: IE 9, 10, Firefox, Chrome, Safari on PC and iPad.
::before and ::after pseudo elements are skewed to provide a side of the triangle each.
Wrapper used for clipping skewed pseudo elements. You may be able to avoid this by using your outer container as the wrapper.
Elements can still be styled with borders, shadows, etc.
Anything underneath will show through properly.
Demo with borders and drop shadow: http://jsfiddle.net/2hCrw/8/
This demo also adds a tweak for iPad with Retina to prevent a gap between the element and the pseudo elements (either caused by drop shadow bleed or sub-pixel rendering behavior).
<div id="wrapper">
<div id="test">test</div>
</div>
#wrapper {
overflow: hidden;
height: 116px;
}
#test {
height: 100px;
background-color: #ccc;
position: relative;
}
#test::before {
content:"";
position: absolute;
left: -8px;
width: 50%;
height: 16px;
top: 100px;
background-color: #ccc;
-webkit-transform: skew(-40deg);
-moz-transform: skew(-40deg);
-o-transform: skew(-40deg);
-ms-transform: skew(-40deg);
transform: skew(-40deg);
}
#test::after {
content:"";
position: absolute;
right: -8px;
width: 50%;
height: 16px;
top: 100px;
background-color: #ccc;
-webkit-transform: skew(40deg);
-moz-transform: skew(40deg);
-o-transform: skew(40deg);
-ms-transform: skew(40deg);
transform: skew(40deg);
}
As an alternative, you can use a transparent image and "extend" the element above it with pseudo elements. I have answered a similar question regarding a circle cut from an element and show support options down to IE7 (as well as future options for true clipping/masking in CSS).
You can do something like this with CSS masks (examples):
http://codepen.io/anon/pen/vgbEH (anti-triangle mask)
http://codepen.io/anon/pen/pEufn (triangle mask)
I used clip-path: polygon(…) property but only my Chrome seems to support it; you could instead create polygon images and reference them with mask-image for broader support.
It isn't possible to cut from divs in css, but it is possible to use an image overlaying the div to make it look like it has been cut.
.triangle{
background-image: url('cut.png');
width: 24px; height: 24px;
z-index: 1;
position: absolute; top: 32px; left: 15px;
}
It looks like there’s a bit of a drop shadow on your <div> as well, which I’m guessing the triangle should respect.
CSS doesn’t currently provide a way to achieve this directly. One approach would be to create an image of the green bottom area of the <div> with the triangle cut-out in it (using e.g. Photoshop), set it as the background of a <div> inside your original <div>, and position it outside of your original <div>.
Here’s a JS Fiddle example that hopefully explains the idea:
http://jsfiddle.net/7y6nz/
Ok, so I am mightly confused to what I guess should be simple. Take the code below, just started using Bootstrap so probably not perfect but sufficient for an example.
<div class="row">
<div class="col-md-12">
<div class="col-md-4">
<h1>Logo Text</h1>
</div>
<div class="col-md-8">
<ul> Navbar.... </ul>
</div>
</div>
</div>
So imagining that code above is my header, how can I ensure that both sides for logo and navbar are centered horizontally and vertically in the their respective div's?
I suspect I need to use a table, table-cell, vertical-align: center but is that really efficient or right?
Need to remain responsive.
Thanks
Try this class:
.vertical_align_middle {
position: relative;
top: 50%;
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
/* etc */
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.vertical_align{
position: relative;
top: 50%;
transform: translateY(-50%);
}
If all you want is to center vertically, all you need is to setup your padding: 10px 0; and play around with that 10 until you get it lined up. It will help if you cascade a clearfix class to the col-md-8. Now, that is the short sweet and simple (SSS) answer. But you mentioned you are now using Bootstrap. If I were you, I would use the Bootstrap navbar and modify accordingly. The whole idea of using such a robust framework is to make sure you take advantage of all the bells and whistles that come with it with less coding time.
I built a sample here
Actually I just thought about it for a minute.
If I set one of the inner divs to this
.inner {
height: 100px;
display: table;
}
Then on the actual content that I want to position
.pos {
display: table-cell;
text-align: center;
vertical-align: middle;
}
So I guess the important thing here is you need to set a height either by % or something more specific so that the alignment has something to work from. And of course set the entire div to be a table with the content of the div a table-cell.
Is that the right way?
.col-md-8, .col-md-4 {
display: flex;
align-items: center; // Vertical
justify-content: center; // Horizontal
}
I have been using back button in jquery mobile page what i need is to vertically align the back button. in the header
Thanks in advance
You can check this web site for the answer (as well as detailed explanation of the problem with vertical alignment): http://phrogz.net/css/vertical-align/index.html
Modify the top value using the following css rule.
.ui-header .ui-btn-left {
top: 0.6em;/*Adjust this value*/
}
There's another stackoverflow post that seems related to your question. It includes a workable solution (elegant and not too hackish). Nevertheless, I hope the jQuery Mobile folks (bless their hearts) make a standard way to specify vertical alignment in any table or grid.
Stackoverflow Post 8280637
I know, its old task but... I have to classes to make this.
One for just vertically center something, one for vertically and horizontally:
.h-centered-item {
position: absolute;
top: 50%;
transform: translate(0, -50%)
}
.vh-centered-item {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
}
Just apply it to the element you want to center vertically or both
Is there a way i can draw the black "background" behind the image using pure CSS ?
I am persuaded that it can be done using the :before pseudo-class. But i can't make it work. I have also tried using shadows, but the final result is not similar what i am trying to achieve.
Scope and requirements:
Modern browsers, no javascript, no jQuery, no plugins and no extra HTML markup.
Before answering:
I know there are zillion ways to achieve what i am trying to do, however i am really looking forward for a pure CSS solution. As stated before, trying to avoid extra markup and javascript for something as simple as that. Thanks!
Here is a fiddle and the code below.
img {
position: absolute;
top: 100px;
left: 100px;
-webkit-transform-origin: center left;
-moz-transform-origin: center left;
-ms-transform-origin: center left;
-o-transform-origin: center left;
transform-origin: center left;
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
transform: rotate(-2deg);
}
img:before {
background: #000;
-webkit-transform-origin: center left;
-moz-transform-origin: center left;
-ms-transform-origin: center left;
-o-transform-origin: center left;
transform-origin: center left;
-webkit-transform: rotate(-4deg);
-moz-transform: rotate(-4deg);
-ms-transform: rotate(-4deg);
-o-transform: rotate(-4deg);
transform: rotate(-4deg);
width: 300px;
height: 300px;
content: ".";
}
<!doctype html>
<html>
<body>
<img width="300" height="150" src="http://upload.wikimedia.org/wikipedia/en/7/70/Example.png" />
</body>
</html>
It seems like the before: element is ignored on img tags - http://jsfiddle.net/GVdYe/
Added a div (sorry :-)
The problem you're having is related to how pseudo-elements work.
Before and after elements are rendered inside their parent. So:
div:before{ content:'before'; }
div:after{ content:'after'; }
renders basically like this:
<div> <span>before</span> Hello <span>after</span> </div>
You can't put other elements in img, because img is a replaced element, and therefore can't apply pseudo-elements to it. Read the spec.
So, the easiest option would be to wrap the image in an <a> (as images sometimes are) and apply your before style to the a.
Alternatively, accept the non-rotated shadow box-shadow provides.
CSS has limitations unfortunately, so you're going to have to compromise somewhere, either in design (I would argue this is the way to go) or in markup.
<style>
html (or body) {
background: url();
}
</style>
I don't know if you just want it behind the image or the entire browser. If you want it behind the image only then you will need a wrapper or at least another <div>, <span> or <img>