I have tried creating a white downward arrow using the HTML code ⇩ that renders as this: ⇩.
However I could not fill it and there comes a lot of space above and below the arrow.
How can I create the same by using CSS?
body{font-size:30px;}
i.arrow-down{
color: #f0f;
width: 0.5em;
height: 0.7em;
display: inline-block;
position: relative;
background: currentColor;
vertical-align: top;
} i.arrow-down:after{
border-right: 0.5em solid transparent;
border-left: 0.5em solid transparent;
border-top: 0.4em solid currentColor;
position: absolute;
content: "";
bottom: -0.3em;
left: -0.22em;
}
Arrow Down <i class="arrow-down"></i>
The HTML code for the down arrow ↓ is ↓
Seems like a lot of work to me, have you considered using icons perhaps? Then you'd have the ability to size them, color them, transform them, etc.
http://fontawesome.io/icons/
Related
I have a problem that has been confusing me for the past day. I have to create a table like the attached image. I have to follow the CSS rules and however I cannot figure out how to draw the single black bar in between EDIT and DELETE. I tried the | however it does not look quite correct. I did a colspan=2 for the header and just got the grey bar per the CSS between EDIT and DELETE.
I appreciate any suggestions that you may have.
I would approach it using a pseudo element like this:
button {
border: 0;
background: transparent;
position: relative;
padding: 0;
}
button + button {
margin-left: 10px;
padding-left: 10px;
}
button + button:after {
content: '';
width: 1px;
height: 10px;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
background: black;
}
<button>Edit</button>
<button>Delete</button>
Addin this to the "edit" button in css:
display: block;
Padding: 0 10px;
Border-right: 1px solid black;
td:after{
content:"|";
margin-left:5px; /*To make it look good*/
}
do this
I would like to create a double line-through in IE11, but I'm having some trouble. It seems that the text-decoration is limited in IE11. Currently I'm using a single line, but since we will use some kanji it may be confused as part of the kanji itself: a double line would be better.
*.strike {
text-decoration: line-through;
}
How can I achieve it?
Use a positioned pseudo-element
span.double-strike {
position: relative;
}
span.double-strike:after {
content: '';
position: absolute;
top: 50%;
height: 1px;
left: 0;
border-top: 1px solid green;
border-bottom: 1px solid red;
width: 100%;
}
<span>
This is my text with <span class="double-strike">
two lines through it</span> in a paragraph because of crazy weird
<span class="double-strike">requirements</span>
</span>
Note with this option each strike can have a different color...as an added bonus.
IE11 does not natively support this...
However there is a potential hacky option... you can always do something like this...
Set a span around the text you wish to apply a double strike through on and then absolutely position the strike through on top of the text.
Found an example on JS Fiddle that shows you what I'm talking about.
span.double-strike {
position: relative;
}
span.double-strike div.the-lines {
position: absolute;
top: 10px; /* Depends on the font size */
left: 0;
border-top: 3px double black;
width: 100%;
height: 100%;
}
https://jsfiddle.net/cmcculloh/Ud5L4/
I am currently working on my share buttons and I am trying to make them act like the share buttons on YouTube do, when a:hovered a span elemental appears with a text "Facebook/Twitter/RSS" etc.
The span element width should be auto since "Facebook" and "RSS" contains a different amount of letters, and I don't want to set a fixed width.
I want the span element to appear in the "middle" of it's current element, check the youtube share buttom for a hint.
I have come this far, see: http://jsfiddle.net/Kz2n2/
try this:
<span title="share">share</span>
css:
.tooltip{
display: inline;
position: relative;
}
.tooltip:hover:after{
background: #333;
background: rgba(0,0,0,.8);
border-radius: 5px;
bottom: 26px;
color: #fff;
content: attr(title);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 100%;
}
.tooltip:hover:before{
border: solid;
border-color: #333 transparent;
border-width: 6px 6px 0 6px;
bottom: 20px;
content: "";
left: 50%;
position: absolute;
z-index: 99;
}
working jsfiddle:
demo
With jQuery UI Tooltip you can make tooltips for your social icons.
Check out the following example, here is the jQuery UI Tooltip implemented.
$('.tooltip').tooltip();
The title tag on your <a href='#'>` is used as the text for your tooltip.
#<span>RSS.</span>
I'm not a pro in CSS but I'm trying to learn.
I have this little sandbox going on:
It's basically a bunch of icons with some extra detail that is displayed once you hover over the icon.
I've been playing around with CSS trying to make this work but I get erratic behaviour so far. Code is here
I wonder if I could somehow immitate a rich tooltip so it opens up when the icon is hovered over, and without changing the position of the other icons.
Any creative idea, including a change in basic design, will be gladly accepted.
My goal is to achieve this using CSS3 Transitions so minimal to no JavaScript is ideal.
Thanks!
Maybe you could use hint.css, its a pure css tooltip
http://kushagragour.in/lab/hint/
I think you need tutorial to view Create CSS3 Tooltip and the main code is
<a title="Create Simple Tooltip Using CSS3" class="tooltip">Some Sample CSS3 Tooltip</a>
.tooltip
{
display: inline;
position: relative;
}
.tooltip:hover:after
{
background: #333;
background: rgba(0,0,0,.8);
border-radius: 5px;
bottom: 26px;
color: #fff;
content: attr(title);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 220px;
}
.tooltip:hover:before
{
border: solid;
border-color: #333 transparent;
border-width: 6px 6px 0 6px;
bottom: 20px;
content: "";
left: 50%;
position: absolute;
z-index: 99;
}
I'm trying to remove dots in a textarea which are present at the bottom-right corner.
Here's an example of what I mean (from Chrome):
How to remove those diagonal lines?
Just add in your CSS file
textarea { resize: none; }
Later (2019) edit:
Related to this answer of mine and the rising number of GitHub code search results on resize: none declarations applied to textarea elements, I wrote some lines on why I think CSS resize none on textarea is bad for UX:
Very often, the textarea is limited to a number of rows and columns or it has fixed width and height defined via CSS. Based solely on my own experience, while answering to forums, writing contact forms on websites, filling live chat popups or even private messaging on Twitter this is very frustrating.
Sometimes you need to type a long reply that consists of many paragraphs and wrapping that text within a tiny textarea box makes it hard to understand and to follow as you type. There were many times when I had to write that text within Notepad++ for example and then just paste the whole reply in that small textarea. I admit I also opened the DevTools to override the resize: none declaration but that’s not really a productive way to do things.
from https://catalin.red/css-resize-none-is-bad-for-ux/
So you might want to check this out before adding the above to your stylesheets.
It is as simple as the following code. Just give the textarea the style resize: none
<textarea style="resize: none"></textarea>
html
sass
textarea {
position: relative;
z-index: 1;
min-width: 1141px;
min-height: 58px;
}
.resizer {
position: relative;
display: inline-block;
&:after {
content: "";
border-top: 8px solid #1c87c7;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
-webkit-transform: rotate(-45deg);
z-index: 1;
opacity: 0.5;
position: absolute;
bottom: 1px;
right: -3px;
pointer-events: none;
}
}
.arrow-resizer-textarea {
height: 0;
width: 0;
border-top: 8px solid #1c87c7;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
-webkit-transform: rotate(-45deg);
position: absolute;
bottom: 1px;
right: -3px;
pointer-events: none;
z-index: 2;
}