I have created a message tool tip like :
But it consists of an image of :
And a regular div to the right. (with text inside)
However , I prefer not to do it with image. I want to create the triangle part with rotated div.
I've managed to do it here by creating a simple div and rotate it:
transform: rotate(45deg);
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari and Chrome */
and the result is :
However (and this is my question) -- can I remove the right part of the rotated div , so i'll only have :
Is it possible ?
p.s. - I know thtat I can hide the right part with div by using another div with position relative/absolute. but I want to know if there is a solution with removing the right part. (or maybe , is there any code to create triangle ?). Also lets assume the angle is 90 deg. like in the red div.
You can do this without rotating the element, wrap this inside a position relative element, and use position absolute to set it right
Demo
.left {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right:10px solid #001744;
}
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I want to make a sidebar where the text is rotated and centered inside the sidebar. I want this in text and css, not background image or something...
How would something like this be done in css?
I have tried to use transform: rotate(7deg); and stuff, but I can't position it correctly.
Here is a codepen with the basic structure. The topbar should be on the left side of the screen (like in the picture).
This also has to be responsive. And when you click the menu toggle the sidebar slides open so the text should be easily hidden with some css/js.
Thanks
ANSWERED:
The answer from #darrylyeo was the right fix for me. Much simpeler to make up the div as you would (horizontally) and then rotate the whole div.
Rotation text inside a div seemed to be more difficult to position right all the responsive breakpoints.
Positioning With Transforms: The Process
Determine what the dimensions are, before any transformations.
Choose an anchor point, or origin, to base the transformation on. Finding the best anchor point for your purpose may take some trial and error.
Based on that anchor point, figure out where to position the element.
Finally, apply the transformation.
First Attempt
.sidebar {
background: #f6f6f6;
width: 100vh;
height: 60px;
transform-origin: bottom left;
position: absolute;
left: 60px;
bottom: 0;
transform: rotate(-90deg);
}
Explanation
To visualize this best, add one property at a time in order as listed.
Apply a background color so we can see where the side bar is.
Set the width to 100% the height of the viewport.
Set the height to (say) 60 pixels.
Position absolutely (fixed would work as well).
Set the transformation anchor point to the bottom left corner.
Position 60 pixels from the left (or whatever you set the height to be), and 0 pixels from the bottom.
Now, rotate around the anchor point counterclockwise by 90 degrees.
Downside
You can't adjust height without having to change left accordingly.
Better Attempt
.sidebar {
background: #f6f6f6;
width: 100vh;
height: 60px;
transform-origin: top left;
position: absolute;
left: 0;
top: 100%;
transform: rotate(-90deg);
}
Explanation
Same as the first solution, except:
Set the transformation anchor point to the top left corner.
Position 0 pixels from the left, and 100% from the top. This means that the top of the element touches the bottom of the viewport.
Now, rotate around the anchor point counterclockwise by 90 degrees.
Now, to expand the sidebar, we have only to change one property: height.
You will achieve this with some JS the easiest.
Click Event the the Menu trigger, and then the eventhandler function to animate the menu on and off screen. For the rotate text functionality, if I understood properly what you want, all you need is this:
#menu li {
margin-top: 3px;
font-size: 14pt;
transition:.5s;
}
li:hover{
-webkit-transform: rotateX(360deg);
transform: rotateX(360deg);}
Here the link to a code pen, click the pink top left menu logo and then hover over the list items.
http://codepen.io/damianocel/pen/XXbymL
I have a div (tab) that I rotate 270 degrees like so:
-webkit-transform-origin: 100% 0%;
-webkit-transform: rotate(270deg);
(Example here: http://users.telenet.be/prullen/align.html)
When I want to align the tab with the top edge of the content box, it's pretty easy. i just set "top" to "3px" (the border size). However, for the bottom it's another story.
It appears I need to calculate this with jquery like so:
$tab.css('bottom', (Math.abs($tab.outerWidth()-$tab.outerHeight())
(Though for this example I'm just using a static value. It may not look exactly like I want it to in your browser, here's an image: )
I was wondering if there is a better way since this does not seem to work all that well in firefox for example (1 pixel shift). Is there an easier way by adjusting the transform-origin perhaps?
(Note that I need to keep the same div structure I have now)
Ideally it'd be as easy as setting bottom to: 3px (the border thickness)
Thanks.
When you want to put the tab at the top of the sticky, apply the class .tab-top to the .sticky-tab element.
.tab-top {
transform-origin: 100% 0%;
transform: rotate(270deg);
top: 5px; /*Border Size*/
right: 5px; /*Border Size*/
}
When you want to put the tab at the bottom of the sticky, apply the class .tab-bottom to the .sticky-tab element.
.tab-bottom {
transform-origin: 100% 100%;
transform: rotate(270deg) translateX(100%);
bottom: 0;
right: -18px; /*Height (appearing as width once rotated) of the tab*/
}
Essentially you want to change the transform origin to be at the bottom right-hand corner of the element and then attach the element to the bottom of its parent. This will place the element exactly below the .sticky. Then use the translateX(100%) to force the bottom of the .sticky-tab to align with the bottom of the .sticky.
I want to have a GIF that stays in the centre of the page regardless of where the user scrolls. I want there to be the illusion that the image is 'floating above the page' rather than it being on it.
I believe CSS would be the way to go about doing this? Assuming a have an image called foo.gif, what would the CSS be to do this?
Without more specific guidance on what you want, and why, the best I can offer is:
img {
position: fixed; /* forces the element to stay fixed in relation to the viewport */
top: 50%; /* sets the top of the image 50% of the page height */
left: 50%; /* sets the left side of the image 50% across the page */
margin-left: -100px; /* moves the image half of its own width to the left-side of the page */
margin-top: -93px; /* moves the image half its height 'up' the page */
box-shadow: 0.5em 0.5em 0.7em #333; /* to give the illusion of 'floating'
border-radius: 1em;
}
JS Fiddle demo.
It works with iiz's solution if you change position:absolute to position:fixed.
I created a jsfiddle for you to see.
I also included a drop shadow (from here) to make the image "float".
It's all a bit pasted together, but it will work and you can alter it in any way you wish...
I've got a <span class="name"> next to an <img> inside a <div>. Inside this span I have some text which I want to turn 90 degrees. However, when I do this (as code suggests below) the span ends up in a somewhat weird position on top of the image.
In IE, the text doesn't rotate at all.
.name {
display: block;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
Any suggestions as to how I solve this?
I've fixed this on my own what I needed to do was put a fixed size on the span and then use position:absolute; to position it where I wanted it
I'm not sure how to fix it. But the reason it doesn't rotate in IE is that you are using "webkit" and "moz" to rotate - which are firefox-like-browser specific functions. You'll have to google for an IE-equivalent.
Is there a way to change the appearance of an icon (ie. contrast / luminosity) when I hover the cursor, without requiring a second image file (or without requiring a hidden portion of the image)?
Here's some good information about image opacity and transparency with CSS.
So to make an image with opacity 50%, you'd do this:
<img src="image.png" style="opacity: 0.5; filter: alpha(opacity=50)" />
The opacity: part is how Firefox does it, and it's a value between 0.0 and 1.0. filter: is how IE does it, and it's a value from 0 to 100.
You don't use an img tag, but an element with a background-image css attribute and set the background-position on hover. IE requires an 'a' tag as a parent element for the :hover selector. They are called css sprites.
A great article explaining how to use CSS sprites.
Here's some code to play with. Basic idea: put all possible states of the picture into one big image, set a "window size", that's smaller than the image; move the window around using background-position.
#test {
display: block;
width: 250px; /* window */
height: 337px; /* size */
background: url(http://vi.sualize.us/thumbs/08/09/01/fashion,indie,inspiration,portrait-f825c152cc04c3dbbb6a38174a32a00f_h.jpg) no-repeat; /* put the image */
border: 1px solid red; /* for debugging */
text-indent: -1000px; /* hide the text */
}
#test:hover {
background-position: -250px 0; /* on mouse over move the window to a different part of the image */
}
a button
The way I usually see things done with smaller images such as buttons it that only a certain portion of the image is shown. Then many states of the picture will make up a larger picture which gets shifted around behind the visible port. I'll delete this when someone has code.