This is the design I am currently working on: http://alpha.bounde.co.uk
as you can see each of the ribbon boxes has the title of the box as vertical text (about, work, contact) and I am trying to find the best way to position them so I can have any text of any length and it will appear down the left hand side. At the moment longer text appears to the right as it is rotated from its center. The reason I want it to be done automatically and not just calculate the width is I am using google fonts (which is currently turned off) and if the font isnt loaded in then the text string will be longer / shorter than before and it will again fall out of position.
h2 {
font-family: 'Lato', sans-serif;
font-weight: 300;
font-size: 30px;
color: #793F26;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
margin: 0;
padding: 0 10px;
position: absolute;
left: -60px;
top: 100px;
background: #fdfdfd;
display: block;
}
this is the styling I am using for the H2 and there is nothing special in the HTML just the H2 inside a container div which has a border of 30px and a padding of 20px.
anyone have any ideas? thanks
I'd put your headings in a larger container element that's centered on the left border, and center the headings within it.
http://jsfiddle.net/isherwood/sqh95/
body {
padding: 20px;
}
.heading-wrapper {
position: absolute;
width: 150px;
margin-left: -100px;
text-align: center;
}
h2 {
position: relative;
left: 0;
top: 50px;
white-space: nowrap;
}
<div class="heading-wrapper">
<h2>Contact</h2>
</div>
It's best to set transform-origin to something that doesn't change based on the content, such as left top.
You can then use translateX(-100%) to "shift" your content so that you're pivoting around the (fixed) top-right corner. This is easier to work with than trying to rotate around the (variable) top-right corner alone.
So your result would be something like:
transform-origin:left top;
transform:translate(X,Y) rotate(-90deg) translateX(-100%);
Replace translate(X,Y) with the required movement to get the element in position down the left side - it's better to do this than to use left and top, because then it will look acceptable in browsers that don't support transforms.
Related
I have an image with some vertical text giving credit on the photo.
I want to ensure that the text always stays outside the image when it becomes responsive.
I am trying to put the text just outside the image, and at the bottom right of the image.
Here is the snippet
section {
max-width: 300px;
margin: 0 auto;
}
img {
width: 93%;
}
.vertical-text {
transform: rotate(90deg);
transform-origin: left top 0;
-webkit-transform: rotate(90deg);
-webkit-transform-origin: left top 0;
-moz-transform: rotate(90deg);
-moz-transform-origin: left top 0;
float: right;
}
<div class="section">
<div class="vertical-text">Photo Credit</div>
<img src="http://www.wrestlingwithpopculture.com/wp-content/uploads/2013/03/BRET-HART-06b.jpg">
</div>
Here you go, I think this is close.
Note the image width calculation. In general the text will have a line-height (which once rotated becomes teh width) of 1.2em...so if we make the image 100% less that amount, there should always be room for the text block.
.section {
max-width: 300px;
margin: 0 auto;
text-align: center;
background: pink;
}
img {
width: calc(100% - 1.2em);
display: block;
}
.img-wrap {
display: inline-block;
position: relative;
}
.vertical-text {
position: absolute;
right: 0;
top: 0;
transform: translate(100%, 50%) rotate(90deg);
transform-origin: top left;
}
<div class="section">
<div class="img-wrap">
<div class="vertical-text">Photo Credit</div>
<img src="http://www.wrestlingwithpopculture.com/wp-content/uploads/2013/03/BRET-HART-06b.jpg">
</div>
</div>
JSfiddle Demo
if i understood right. you want the text to be outside of the photo to the right
to .vertical_text add this width:0%;white-space:nowrap;
EDIT :
on mobile with media query make the img smaller. 85% instead of 93%. that should do it. you need to have enough space for the text to fit in. also you could make the font-size of the text smaller if you want. but changing the img size should be enought.
To align the text on the bottom it's a bit tricky because of the rotation.
use this
at .section add position:relative
at .vertical_text add position:absolute;bottom:68px;right:0
where bottom:68px is the actual width of your text
This is driving me insane. I've been using the Firefox inspector to try to figure out how this arrow was made (below) on the Headway site.
I've whittled away the code by deleting chunks via the inspector, and got it down to this:
No matter where I inspect, I can not find any such shape. No background image, no glyphs, nothing. It hardly even matters at this point, but I'm pulling my hair out trying to figure out how they did this!
Any CSS gurus care to take a look and chime in? For the sake of learning. :)
It's just a rotated square in the form of a ::before pseudo element.
As you can see, the element is a square (same height/width). The element is absolutely positioned with left: 50% and a negative margin-left of -31px (half the width) for horizontal centering. Finally, transform: rotate(-45deg) is used to rotate the square.
Here is the styling used:
.home-testimonial-wrapper:before
.home-cta-area::before, {
display: block;
width: 62px;
height: 62px;
background: #253031;
position: absolute;
top: -15px;
left: 50%;
margin: 0 0 0 -31px;
z-index: 5;
content: "";
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}
Aside from this, if you're interested in seeing how to make a triangle using CSS, see this answer.
You can make a triangle by playing with borders of a zero width/height div:
.triangleDiv {
width: 0;
height: 0;
border-style: solid;
border-width: 0 100px 100px 100px;
border-color: transparent transparent #000000 transparent;
}
<div class="triangleDiv"></div>
Just adjust the border-widths to get the size you want. No need for transforms. By adjusting which borders have width, you can 'rotate' the triangle.
The previous answers are good!
Just wanted to add, for design elements like that I always use one of two things.
Pseudo element to create the design feature ( as described above )
Pseudo element containing the design feature as an svg
Hope that helps!
You can do what they've done with rotating the square, but a more common solution is to use the border property:
.example {
position: relative;
}
.example:after {
content: '';
display: block;
position: absolute;
top: 0; /* or wherever */
left: 0; /* or wherever */
border: 10px solid transparent;
border-bottom-color: #000;
}
I've one small image displayed along the right edge of the screen. Actually that image is vertical but I want to display it horizontally. How should I achieve this using HTML and CSS?
For your reference following is the screen shot of the page which contains the vertical "Contact" image on right edge bottom side.
Can someone please help me in it?
Following is the code I tried for the vertical position it currently has :
HTML Code :
<div id="new_button_1">
<a href="#" >
<img src="http://www.yourdomain.com/contact.jpeg" alt="" pagespeed_url_hash="3893298907" border="0" align="middle" height="89" width="33">
</a>
</div>
CSS code :
#new_button_1 {
width: 33px;
position: fixed;
right: 0;
top: 85%;
cursor: pointer;
z-index: 7;
}
There is no reason to use an image for such a simple button.
Let's create this with simple CSS:
By default, of course, it is not rotated. You can rotate it with:
transform: rotate(-90deg)
and you can fix it to the same position it currently is using the same CSS and transform-origin: 100% 100% so the rotation is made on the right hand and bottom side and will line up with the viewport.
Further Reading on the MDN
The transform property
The transform-origin property
Working Examples
a {
background: #FCD033;
text-decoration: none;
color: #000;
font-family: sans-serif;
padding: 5px 10px;
}
.rotate {
transform: rotate(-90deg);
display: inline-block;
}
.fixed {
position: fixed;
right: 0;
top: 80%;
cursor: pointer;
z-index: 7;
transform: rotate(-90deg);
transform-origin: 100% 100%;
/*x-offset y-offset = (right hand side and bottom to line up with viewport edge)*/
}
<h2>Not Rotated</h2>
Contact
<h2>Rotated</h2>
Contact
<h2>Fixed (bottom right)</h2>
Contact
You can use CSS3 rotation
transform: rotate(90deg);
There is a tag trigger on the right side of each line.
Some of those tags may contain messages. Initially only an indicator icon
is shown and the message is hidden. (I draw the overflow
for demonstration, but there may be other methods) When the shown icon
is hovered, the whole tag would move to the left and showing the
message with a button.
Now here is the problem. Firstly I cannot animate the tag with scalable message length in pure CSS. Secondly since I'm using fixed height for each line, I cannot set the right property for vertical alignment for the message text.
Here is my attempt http://codepen.io/rix/pen/DaGyk.
1. To align the left edge of the message to the right edge of the row regardless of the message length: first position the message absolutely with a right: 50px (since you'd want the left icon to show), then apply a transform: translateX(100%):
.card-item .control {
position: absolute;
right: 50px;
transform: translateX(100%);
/* other styles... */
}
2. To animate the message on hover: you need to define a transition on .control, then simply transform: translateX(0) on :hover. Also, set right: 0 so that the right edge of the message is flush with the right edge of the row.
.card-item .control {
position: absolute;
right: 50px;
transform: translateX(100%);
transition: all 0.3s;
/* other styles... */
}
.card-item .control:hover {
right: 0;
transform: translateX(0);
}
3. To vertically align the message text: since you have a fixed height for the message, set the line-height of the message text to the row height which is 50px, and vertical-align: top:
.card-item .control .message {
/* remove this: margin-top: -8px; */
line-height: 50px;
vertical-align: top;
}
http://codepen.io/myajouri/full/jCBiH
In this example I have the pop-over-part under the card popping out to the right. Changing the right: -10 to 10 and changing background-position: to top left should help you out. You can play around with it.
Keep each line as a li and you can give your li a class:
li {
text-align: -webkit-match-parent;
line-height: 20px;
}
.pop-over-part {
position: absolute;
right: -10px;
top: 6px;
height: 100%;
width: 10px;
display: inline-block;
background-image: url(/assets/icons/tab-x.png);
background-repeat: no-repeat;
background-position: top right;
cursor: pointer;
}
The layout I'm trying to achieve is shown in this image:
The HTML below is one of many attempts which haven't worked. The project this is for is targeting HTML5 in the latest browsers only, so there is no need for it to work in anything except the latest Chrome, Safari, Firefox and (with a following wind) IE9 beta.
<!DOCTYPE html>
<html>
<body>
<div style="border: solid 1px red; width:600px; height: 600px">
<span style="-webkit-transform:rotate(-
90deg);display:block;position:absolute;bottom:600px">My Vertical Text</span>
<img src="http://www.gizmodo.com/assets/resources/2007/01/Bill-gates-mugshot.jpg"
style="position:absolute;bottom:600px" />
</div>
</body>
</html>
I suppose you might want something like this: http://jsfiddle.net/aNscn/3/
bottom: 600px is going to get you nowhere - that's just going to put the elements 600px away from the bottom of the user's screen. Instead, give the outer div a position: relative and let the two elements align to it's bottom with a suitably low bottom value. Also check out the transform-origin property to get the positioning of the span correct after rotation.
#outer {
border: solid 1px red;
width:600px;
height: 600px;
position: relative;
}
#text {
-webkit-transform: rotate(-90deg);
-webkit-transform-origin: left top;
-moz-transform: rotate(-90deg);
-moz-transform-origin: left top;
-o-transform: rotate(-90deg);
-o-transform-origin: left top;
transform: rotate(-90deg);
transform-origin: left top;
position: absolute;
bottom: 0;
left: 5px;
}
#img {
position:absolute;
bottom: 15px;
left: 30px;
}