CSS for elements, fiddle
#scroll_jump
{
margin-top: 310px;
position: fixed;
margin-left: 20px;
display: none;
}
#jump_link
{
display: block;
width: 70px;
height: 20px;
background: #BBDAF7;
color:white;
font-family: Arial,Liberation Sans,DejaVu Sans,sans-serif;
font-size: 16px;
font-weight: bold;
text-decoration: none;
text-align: center;
padding-left: -1px;
}
#jump_link:after
{
content: '';
position: absolute;
width: 0;
height: 0;
border: 35px solid;
border-bottom-color:#BBDAF7;
border-top-color:white;
border-left-color:#ffffff ;
border-right-color: #ffffff;
top: 0;
margin-top: -70px;
left: 49%;
margin-left: -35px; /* adjust for border width */
}
Correct display: Chrome, Firefox, IE.
How it looks in Opera:
P.S. So far Opera created much more troubles, than IE!!!
Instead of this:
#jump_link:after{
left: 49%;
margin-left: -35px;
}
all you need is this:
#jump_link:after{
left: 0;
}
and then it works just fine in grand ol' Opry (as well as the other browsers). :-)
It's about your :after pseudo-element. For 'left' you're using a percentage. Most browsers take this to mean a percentage of the main element, Opera will take this a percentage of the parent. Use pixels if you can for the left position (e.g. 35px).
Related
Is there any way to create the border on the left with css ?
Here is a way to do it using CSS; you are just layering a Parallelogram and a Rectangle:
.espanolIcon
{
width: 300px;
height: 100px;
padding-left: 30px;
}
.rectangle {
position: absolute;
top: 0px;
left: 200px;
width: 200px;
height: 100px;
background-color: green;
border-radius: 0px 0px 30px 40px;
}
.arrow-left {
position: absolute;
top: 0px;
width: 300px;
height: 100px;
background-color: green;
-webkit-transform: skew(22deg);
transform: skew(22deg);
border-radius: 0px 0px 30px 40px;
}
h1 {
color: white;
}
<div class="espanolIcon">
<div class="rectangle"><h1>Espanol</h1></div>
<div class="arrow-left"></div>
</div>
Use a zero-dimension :before with thick, partial borders
By adjusting the top/bottom and left/right values of border-width on the :before pseudo-element, you can effectively change the skew of the triangle. The left position can then be changed to properly align the pseudo-element.
a {
display: inline-block;
position: relative;
margin-left: 14px; /* Should counter `left` value of `a:before` */
padding: .5em 1em;
color: #fff;
font: bold 1em/1 sans-serif;
text-decoration: none;
text-transform: uppercase;
border-radius: 0 0 10px 10px;
background: #75bf41;
}
a:before {
content: '\200B'; /* zero-width non-breaking space */
display: block;
position: absolute;
top: 0;
left: -14px; /* Adjust to align */
width: 0;
height: 0;
border-width: 14px 8px; /* Adjust top/bottom and left/right to skew */
border-style: solid;
border-color: #75bf41 #75bf41 transparent transparent; /* Triangle orientation. */
}
Español
Full css could work, but you should use .png as background-image or perhaps you could use .svg as you can animate and/or change every point or pixel. You might be able to use just CSSbut it would take a lot of leveling and positioning and alot of layers of absolute and relative positioning. As Css would only change the full width of the element, and it can only be used to change the width of elements. What you can do is use .svg, you could map every pixel which could be animated.
I accomplished it using borders and pseudo elements.
<ul>
<li class="lang-item lang-item-6 lang-item-es">
::before
<a>Español</a>
</li>
</ul>
ul {
position:relative;
}
.lang-item {
text-align: right;
position: relative;
}
.lang-item a {
background: #76c53f;
padding: 15px;
color: #fff;
text-transform: uppercase;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 14px;
}
.lang-item::before {
position: absolute;
right: 101px;
top: -15px;
content: "";
display: inline-block;
border-top: 40px solid #76C541;
border-left: 40px solid transparent;
}
jsfiddle
I am trying to get following output (a large slash line between two numbers):
Following code works on Firefox and Chrome but doesn't work on Safari. Would there be any workaround for that?
Here's the code:
HTML:
<div class="wrap">
<div class="top">4</div>
<div class="bottom">15</div>
</div>
CSS:
.top {
display: block;
float: left;
font-size: 60px;
font-weight: 700;
}
.bottom {
display: block;
float: left;
font-size: 38px;
font-weight: 700;
margin-top: 70px;
position: relative;
width: 28px;
}
.bottom:before {
border-left: 1px solid;
content: "";
height: 66px;
position: absolute;
right: 0;
top: -35px;
transform: skew(-45deg);
transform-origin: left top 0;
width: 0;
}
JSFiddle Demo:
http://jsfiddle.net/pg4sxrc1/
Certain versions of Safari still require the use of the -webkit- prefix for transform and transform-origin, try adding the following definitions to your .bottom:before CSS:
-webkit-transform: skew(-45deg);
-webkit-transform-origin: left top 0;
jsFiddle Demo
I'm trying to get a trapezoidal perspective shape to have the whole area be clickable. I've gotten it to work in Firefox and even IE, but Chrome isn't cooperating too well.
Here's a fiddle with the shape and a link: http://jsfiddle.net/9n9uh6f6/1/
As you can tell, the link doesn't become active until you hover over the 'area' part of the text. In other browsers, the whole height of the shape is clickable.
I read that Chrome renders a perspective image differently and perhaps that's why it's not doing what it's supposed to.
Here's my CSS:
.prodcaptions {
width:136px;
height: 85px;
position:relative;
left:10%;
text-transform:uppercase;
text-align:center;
letter-spacing: 1.6px;
color: #000;
}
.prodcaptions:before {
content:"";
position:absolute;
border-radius:1px;
box-shadow:0 0 0 3px #27628e;
top:-5%;
bottom:-11%;
left:-1%;
right:-5%;
-webkit-transform:perspective(40em) rotateX(-45deg);
transform:perspective(40em) rotateX(-45deg);
}
.prodcaptions a {
z-index:999;
position:relative;
height: 85px;
display: block;
padding-top: 25px;
}
Please have look at this code:
.prodcaptions {
position: relative;
height: 150px;
width: 150px;
margin: 50px;
padding: 10px;
perspective: 150px;
perspective-origin: 50% 0;
}
a{
padding: 50px;
position: absolute;
border: 1px solid black;
transform: rotateX(-15deg);
}
Seems to work the way you want it. fiddle
Try this shape for link trapazoid shape - jsFiddle
Advantage - you can change skew property to change angle of shape! Easy and effective! Reverse value for reverse shape!
html
Click Here!
css
a {
display: block;
z-index: 1;
position: relative;
/* custom sizes */
width: 136px;
height: 85px;
/* demo-only decoration */
margin: 100px auto;
font: 16px/50px Arial, sans-serif;
text-transform: uppercase;
text-align: center;
background-color: orange;
}
a:before, a:after {
content:'';
position: absolute;
top: 0;
left: 0;
width: 100%;
bottom: 0;
z-index: -1;
/* demo-only decoration */
border-radius: 4px;
background-color: orange;
}
a:before {
transform: skew(-20deg);
left: 25px;
}
a:after {
transform: skew(20deg);
right: 25px;
left: auto;
}
I have a padding on my textarea element and I would like the content to remain padded as you scroll within the textarea. It is working as expected in Firefox but not in Chrome. The below image shows the difference in output:
CSS:
textarea {
width: 250px;
height: 160px;
padding: 15px;
font-family: Arial;
font-size: 12px;
line-height: 18px;
border: 1px solid #CCCCCC;
overflow: auto;
resize: none;
}
In Chrome, the top and bottom padding only appears at the beginning and end of the text content. Here is a jsfiddle to demonstrate:
http://jsfiddle.net/LkE6f/
How can I make the padding in Chrome appear/render in the same way as it does in Firefox?
You could do something like this, it's not very flexible (fixed width), but you can expand on it. It fixes the issue in Chrome and doesn't break Firefox. It uses pseudo-elements on #container, which work in IE8+
textarea {
width: 250px;
height: 160px;
padding: 15px;
font-family: Arial;
font-size: 12px;
line-height: 18px;
border: 1px solid #CCCCCC;
overflow: auto;
resize: none;
display: block;
}
#container:before, #container:after {
display: block;
height: 15px;
background-color: #FFF;
position: absolute;
left: 1px;
width: 225px;
content:'';
}
#container:before {
top: 1px;
}
#container:after {
bottom: 6px;
}
Here's a jsFiddle.
Update: Added display: block to textarea to fix IE positioning issue.
Update 2: Alternative solution which takes its width from the #container div and for which you'd need to set the right value based on the width of the scrollbar of the browser, the 17px value is ok in Chrome at the moment. A pro with this solution is that you can set the width of the textarea to anything by changing the width of the #container, and the pseudo-elements will scale accordingly. jsFiddle.
#container {
width: 260px;
margin: 20px auto;
position: relative;
}
textarea {
width: 100%;
height: 160px;
padding: 15px;
font-family: Arial;
font-size: 12px;
line-height: 18px;
border: 1px solid #CCCCCC;
overflow: auto;
resize: none;
display: block;
}
#container:before, #container:after {
display: block;
height: 15px;
background-color: #FFF;
position: absolute;
left: 1px;
right: 17px;
content:'';
}
#container:before {
top: 1px;
}
#container:after {
bottom: 1px;
}
Best answer:
Embrace the difference between browsers; the web is not uniform and your design will never be 100% identical across browsers.
Work around answers:
If you don't care about the scrollbar having a gap at the top and bottom, you can use borders and an outline like this.
OR
This can be achieved with a pseudo element, if you are happy wrapping each textarea in a div. Should display correctly on IE8+, FF and Chrome.
Have a fiddle!
HTML
<div class="textareaWrap">
<textarea>Content</textarea>
</div>
CSS
textarea {
position: relative;
width: 250px;
height: 160px;
font-family: Arial;
padding: 15px;
font-size: 12px;
line-height: 18px;
border: 1px solid #CCCCCC;
resize: none;
}
.textareaWrap {
position: relative;
}
.textareaWrap:after {
position: absolute;
content:'';
display: block;
width: 232px;
height: 15px;
background: #FFF;
z-index: 1;
bottom: 5px;
left: 1px;
}
.textareaWrap:before {
position: absolute;
content:'';
display: block;
width: 232px;
height: 15px;
background: #FFF;
z-index: 1;
top:1px;
left: 1px;
}
Try the below solution for the textarea
textarea {
-moz-appearance: textfield;
-moz-binding: url("chrome://global/content/platformHTMLBindings.xml#inputFields");
-moz-user-select: text;
background-color: -moz-field;
border: 2px inset threedface;
color: -moz-fieldtext;
cursor: text;
font: -moz-field;
width:250px;
height:150px;
letter-spacing: normal;
line-height: normal !important;
padding: 1px 0;
text-align: start;
text-indent: 0;
text-rendering: optimizelegibility;
text-shadow: none;
text-transform: none;
word-spacing: normal;
}
Fiddle link Link
Regards
Mahadevan
I have a small template that displays a textarea and a close block.
I used Chrome to develop, but it looks different in other browsers.
That close button changes its location in FF and Opera.
<div class="video-box">
<textarea id="id_video" rows="10" cols="40" name="video" placeholder="Embed your video here." class="has- placeholder" style="display: inline-block;"></textarea>
<div class="close" style="display: block;">close</div>
</div>
CSS:
.video-box {
position: absolute;
margin-top: 25px;
}
textarea {
width: 256px;
border: 1px solid #C7C6C6;
height: 100px;
resize: none;
}
.close {
position: absolute;
font-family: Arial, Verdana, sans-serif;
top: 94px;
left: 222px;
z-index: 10;
font-size: 8px;
cursor: pointer;
background: white;
border: 1px solid #808080;
padding-top: 1px;
padding-left: 1px;
text-transform: uppercase;
letter-spacing: 2px;
}
What can cause this problem?
http://jsfiddle.net/3hTH2/
Couple of things to change.
First of all set font-size: 0; on .video-box, because it is inline-block extra whitespace can be added after the element:
.video-box {
position: absolute;
margin-top: 25px;
font-size: 0;
}
Next, set margin: 0; on text-area to reset the default margin added to the element by browsers:
textarea {
width: 256px;
border: 1px solid #C7C6C6;
height: 100px;
resize: none;
margin: 0;
}
Finally, use bottom: 0; and right: 0; instead of top and left on .close as it will ensure the button is positioned at the bottom right of the container no matter what size it is:
.close {
position: absolute;
font-family: Arial, Verdana, sans-serif;
bottom: 0;
right: 0;
z-index: 10;
font-size: 8px;
cursor: pointer;
background: white;
border: 1px solid #808080;
padding-top: 1px;
padding-left: 1px;
text-transform: uppercase;
letter-spacing: 2px;
}
http://jsfiddle.net/FVP6T/
All those browsers have different HTML rendering engines, so some minor changes are inevitable. It's almost impossible to get everything looking exactly the same in every browser; I wouldn't even try.
Try positioning from the right and bottom instead:
.close {
position: absolute;
right: 0;
bottom: 4px;
/* etc. */
}
Hidden Hobbes's solution is/was the closest but it may still be treated incorrectly by Firefox - at least in my case, 'cause I see it is placing the .close button 1px lower.
So check this solution. At least another one :) I changed the font size on .close button to 30px just to see the difference better.
#-moz-document url-prefix() {
.close {
margin-bottom: 1px !important; /* !important may be omitted */
}
}
.video-box {
position: absolute;
margin-top: 25px;
font-size: 0px;
}
textarea {
width: 256px;
border: 1px solid #C7C6C6;
height: 100px;
resize: none;
}
.close {
position: absolute;
font-family: Arial, Verdana, sans-serif;
bottom: 0px;
right: 0px;
z-index: 10;
font-size: 30px;
cursor: pointer;
background: white;
border: 1px solid #808080;
padding-top: 1px;
padding-left: 1px;
text-transform: uppercase;
letter-spacing: 2px;
}
.close:hover {
background: grey;
}
Check the working fiddle