Does anybody know if there's a double chevron symbol in unicode/HTML-space similar to the double guillemet represented by » (»)?
In other words, I'm trying to avoid using an image if I can get by with text, but I need something like this:
It's the double chevron I can't seem to figure out. Looks like graphics for me it is.
May be this site will help you http://shapecatcher.com/ , very useful!
︽ U+FE3D PRESENTATION FORM FOR VERTICAL LEFT DOUBLE ANGLE BRACKET
︾ U+FE3E PRESENTATION FORM FOR VERTICAL RIGHT DOUBLE ANGLE BRACKET
These require a Chinese or Japanese font though.
I can't give you the character entity that you want, but it's possible to effect an...alternative, and still not use images (though it does require that the text itself be wrapped in an element, in this case span):
<span class="shadowed">^</span>
<span class="rotated">»</span>
CSS:
span { /* this is all, pretty much, just for the aesthetics, and to be adapted */
margin: 0 auto 1em auto;
font-family: Helvetica, Calibri, Arial, sans-serif;
font-size: 2em;
font-weight: bold;
color: #000;
background-color: #ffa;
display: block;
width: 2em;
height: 2em;
line-height: 2em;
border-radius: 0.5em;
text-align: center;
}
span.shadowed {
text-shadow: 0 0.5em 0 #000;
}
span.rotated {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
JS Fiddle demo.
The above span.rotated section, for IE < 10 compatibility (using filters, whereas IE 10 (or possibly 9) would/should use the -ms-transform or, simply, transform CSS3), using a filter approach:
span.rotated {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
/* IE < 10 follows */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
JS Fiddle demo (works in IE 7/XP, other versions I'm unable to test).
There's a problem with rotation. If you apply rotation(90deg) and rotation(-90deg) to two separate » you'll see that their position changes. A hacky way to fix it is to apply direction: rtl like this:
http://codepen.io/tomasz86/pen/lmCaL
Related
When using writing-mode: vertical-lr with text-orientation: upright, all characters are about the same height. However, on Safari, the space character between words becomes very small. Here is a code snippet for demonstration:
#import url("https://fonts.googleapis.com/css2?family=Asap&display=swap");
span {
font-family: Asap, sans-serif;
text-orientation: upright;
writing-mode: vertical-lr;
-webkit-text-orientation: upright;
}
<span>Hello, World!</span>
On Chrome and Firefox it looks like this:
On Safari, however, it looks like this:
What would be the best way to make the space character the same size on all browsers that works with multiple fonts and font sizes?
You can try this, instead of using text-orientation: upright; try just rotating the text using transform: rotate(90deg);
span {
font-family: Asap, sans-serif;
transform: rotate(90deg);
}
Then target specific browsers:
span {
font-family: Asap, sans-serif;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
Here is an example in a snippet -
span {
transform: rotate(90deg);
display: block;
position: fixed;
text-transform: uppercase;
}
<span>Hello, World!</span>
I am expecting some thing like the below pic. But I want to add text on that vertical border.
on that border I want to add text ex: Student detail
I already saw this link.
And also I tried this below code to rotate: -90 degree
-ms-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(-90deg);
It is working fine. But I want to merge those 5 points with that vertical text.
How to achieve it?. I am new to css
I think you want to do something like that >
https://codepen.io/dakata911/pen/NweMpy
/* Rotate div */
-ms-transform: rotate(270deg); /* IE 9 */
-webkit-transform: rotate(270deg); /* Chrome, Safari, Opera */
transform: rotate(270deg);
Not exactly a pure CSS solution, but it's pretty easy to get vertical text by adding line breaks, and then using pre spacing. Second example uses a bit of JS to avoid hardcoding the line breaks into the markup.
h2 {
white-space: pre;
text-align: center;
width: 40px;
background: grey;
color: white;
padding: 10px;
}
<h2>V
e
r
t
i
c
a
l
T
e
x
t
</h2>
const h2 = document.querySelector('h2')
h2.innerText = h2.innerText
.split('')
.join('\n')
h2 {
white-space: pre;
text-align: center;
width: 40px;
background: grey;
color: white;
padding: 10px;
}
<h2>Vertical Text</h2>
I am using zoom: 0.5; and it is working fine on my site, but when I add moz-transform: scale(0.5); and moz-transform-origin: 0 0; To make the site Firefox compatible, the fixed positioned elements I have become unfixed and not placed in the correct place (to the top and left of where they should be). The site works as intended in chrome, and this only happens in Firefox.
Here is the code
.mobPopUp{
position: fixed;
width: 500px;
height: 200px;
border: 5px solid black;
text-align: center;
font-size: 24px;
font-weight: 900px;
color: lime;
bottom: 0px;
text-shadow: 3px 3px black;
}
#mobPopUpBlue{
right: 0px;
background-color: blue;
}
html{
zoom:0.5;
-moz-transform: scale(0.5);
-moz-transform-origin: 0 0
}
<div id="mobPopUpred" class="mobPopUp">Right click on a mob to see their stats here</div>
What am I doing wrong? And how can I have it so it works on Firefox as it does on Chrome with zoom
There isn't really a CSS zoom property, it's just a non-standard property invented by Internet Explorer and adopted by some other browsers for compatibility reasons. The correct property to use for scaling transformations is the transform property.
Firefox has long since remove the -moz- vendor prefix, and never implemented zoom, so that's probably why your code does nothing in Firefox, but for maxium browser support, you can use the below.
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5);
That will work in pretty much anything IE9 or better. If you need IE8 support, then you might try adding zoom in an IE <= 8 CSS hack.
I have a website which i want to rotate a title 270deg on! I have seen many other posts about this but they don't seem to be working for me! Below is the code of the item i want to rotate! Where do i put the code and what do i put?
I want to put it in this code! This is the whole segment for that text!
/* LOGO CSS*/
#logo_index_text a,
#logo_index_left a,
.logo_permalink_page
{
font-weight: {text:Weight Logo Index};
font-family: {font:Font Logo};
color: {color:Text Logo};
}
#logo_index_left{left:{text:Position Logo Left}}
#logo_index_left {top:{text:Position Logo Top}}
#logo_index_text a,
#logo_index_left a
{
letter-spacing: {text:LetterSpacing Logo};
font-size: {text:FontSize Logo Index};
line-height: {text:LineHeight Logo}
}
{block:IfNotLogoOpacityonHover}
#logo_index_text a:hover,
#logo_index_left a:hover{
opacity: 1 !important}
{/block:IfNotLogoOpacityonHover}
.logo_permalink_page{font-size: {text:FontSize Logo Perma}}
The code i have tried is:
-moz-transform: rotate(270deg);
-moz-transform-origin: 50% 50%;
-webkit-transform: rotate(270deg);
-webkit-transform-origin: 50% 50%;
and
-moz-transform: rotate(7.5deg); /* FF3.5+ */
-o-transform: rotate(7.5deg); /* Opera 10.5 */
-webkit-transform: rotate(7.5deg); /* Saf3.1+, Chrome */
and
-webkit-transform: rotate(320deg);
-moz-transform: rotate(320deg);
-o-transform: rotate(320deg);
Thanks for the help in advance! :)
Here is the simplest place to start. To me your main logocss seems a bit of a mess, but bear in mind you need to have display: block for anything to rotate.
Fiddle: http://jsfiddle.net/jjBGz/3/
Beneth's method won't work if you have a background...
Here's the real trick:
The secret is having vertical-lr set on the original element, so width and height are already correct.
Then all you have to do is rotate the text 180 degrees with transform-origin center...
Works in Chrome and Firefox and IE 11 & 10 (according to MDN backwards-compatible to IE9, but since ms-transform-rotate doesn't work properly, it degrades gracefully to only writing-mode vertical-lr in IE9, if you omit ms-transform).
https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation
https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode#Browser_compatibility
https://msdn.microsoft.com/en-us/library/ms531187(v=vs.85).aspx
Example:
.blackhd
{
vertical-align: bottom;
width: 40px;
#height: 100px;
border: 1px solid hotpink;
background-color: black;
text-align: center;
}
.vert
{
display: inline-block;
color: white;
#font-weight: bold;
font-size: 15px;
writing-mode: vertical-lr;
#writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
transform-origin: center;
transform: rotate(180deg);
padding-top: 2mm;
padding-bottom: 3mm;
}
<table>
<tr>
<td class="blackhd"><span class="vert">abc</span></td>
<td class="blackhd"><span class="vert">defghijkl</span></td>
</tr>
<tr>
<td>abc</td>
<td>defghijklmnopqr</td>
</tr>
</table>
I am trying to write up some CSS for a company logo that is a fairly accurate depiction of the jpg currently on the company server. its pretty basic except for some color overlays on the logo.
My question is:
is this even possible? if so how can i go about doing so
please dont bash, im a total noob, my first line of html was about a week ago...
Here is my markup
<html>
<head>
<meta charset="utf-8"/>
<title>
</title>
<link rel="stylesheet" href="css/stylesheet.css"
</head>
<style contenteditable="">
#infinity {
position: absolute;
width: 212px;
height: 100px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#infinity:before,
#infinity:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 60px;
height: 60px;
border: 15px solid;
-moz-border-radius: 50px 50px 0 50px;
border-radius: 50px 50px 0 50px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#infinity:before{
color: #ADB2B3;
}
#infinity:after {
left: auto;
right: 15;
color: #A99055;
-moz-border-radius: 50px 50px 50px 0;
border-radius: 50px 50px 50px 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
</style>
<body>
<br>
<br>
<div>
<div>
<div style="float:left; margin-right: 0px;"id="infinity">
</div>
<div>
<p style="float:left; margin-top:70px; margin-left:130px; font-size:60px;
font-family: Avenir, sans-serif;">
PORTFOLIO
</p>
</div>
</div>
</body>
</html>
Check this out: http://jsfiddle.net/tMEqk/1/
It's not quite there, but it's closer
I made a relatively positioned container and then drew out each loop from there, positioned everything according to the box. Changed the border to get the continuous effect and then obscured the diagonal line generated by a gold box. There's no rotation either, but if you want to change the size there's a little bit of math to be done. Did it in Chrome, haven't checked other browsers yet.
Edit
I'm not exactly condoning this, but I did enjoy trying to recreate it. This really should be an image, and you can prevent the broken image by saving and referencing it as a local file.
Just so I am straight. You are trying to create the entire logo with CSS? Is this correct? If so, why CSS versus using the JPEG? If you are using straight CSS you will be limited to what you can do, also most of it would be CSS3 and browser hacks, which poses a couple of problems.
The first being CSS3 is only supported in modern browsers.
The second being browser hacks don't pass W3 CSS validation.
This is not an answer, really, but I would strongly suggest that you can at most try to make a scalable vector image out of that logo, using Inkscape or such programs. This logo will be very easy to convert to SVG (scalable vector graphics). But as Kris said, using CSS to accomplish all of this may not perform as intended in many situations.