On most startup pages, like this one (the error message from sever), I see a fancy triangle that seperates section divs. Is it using any bootstrap components or people do it manually?
How to make this nice triangle?
Creating a triangle is possible with CSS.
cssarrowplease.com (Have a look at this service, it will help you create these with ease!)
A sample code similar to the one you have mentioned :
.arrow_box {
position: relative;
background: #ffffff;
}
.arrow_box:after {
bottom: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #ffffff;
border-width: 30px;
margin-left: -30px;
}
CSS triangles are actually very simple!
Here is a great tutorial on it: http://css-tricks.com/snippets/css/css-triangle/
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
Trying to style the error output on jquery.validate and I am not getting any success using Pseudo-elements in the css. Anyone ever have any success styling an error box with an arrow on the top with jquery.validate? Can get the box with the with arrow on top using normal CSS but not with jquery.validate?.
Used http://cssarrowplease.com/ to get the CSS (code below). Thanks
<style type="text/css">
label.error {
float: none;
color: red;
padding: .8em;
vertical-align:middle;
font-size:12px;
display: inline;
font-style:normal;
border: solid 1px #ccc;
border-radius: 4px;
background: #f8f8f8;
box-shadow: 0px 2px 6px rgba(0, 0, 0, .3);
}
label.error:after, label.error:before {
bottom: 100%;
left: 30%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
label.error:after {
border-color: rgba(248, 248, 248, 0);
border-bottom-color: #f8f8f8;
border-width: 8px;
margin-left: -8px;
}
label.error:before {
border-color: rgba(204, 204, 204, 0);
border-bottom-color: #ccc;
border-width: 9px;
margin-left: -9px;
}
</style>
The reason your code is failing is because your trying to apply it to a <label> element.
The code you've linked to is applying the sample CSS to a <div> element, which is nothing like a <label>.
Use the errorElement option to force the jQuery Validate plugin to use <div> elements instead of label.
$('#myform').validate({
// your other options, rules, and callbacks
errorElement: 'div'
});
Don't forget to change label.error into div.error in all of your CSS rules.
You're going to need the specificity of div.error because the plugin also applies the error class to the input elements.
EDIT:
Since, by your own admission, you're "not an expert in CSS", why reinvent the wheel? You can easily combine jQuery Validate with a tooltip plugin, like Tooltipster, where all the difficult CSS tooltips are provided for you. See this question/answer and this demo.
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 am trying to create a box that has a 'highlight' down the sides of it, and at the top.
The CSS for the box was pretty simple, however, now that I introduced this 'highlight' to the design, it has added another level of complexity to the CSS...
I have tried a lot of things, not sure if they will help but here is my most recent:
/* Define the Main Navigation Drop Downs */
#mn_navigation .dd {position:relative;width:226px;padding:29px 0 0;background:transparent url("//beta.example.co.uk/_images/_global/dd_handle.png") no-repeat;z-index:1000;}
#mn_navigation .dd nav {padding:30px 0;background:#3E5032 url("//beta.example.co.uk/_images/_global/dd_bg.png");border-radius:3px;}
#mn_navigation .dd nav a {font-family:Arial, Helvetica, sans-serif;font-size:12px;color:#fff !important;height:25px;line-height:25px;}
Please note I have posted the above to show that I have actually tried to sort this myself. The above code will probably not even help as a starting point as a restructure of the HTML may be necessary!
Here is the current HTML (probably needs to be restructured):
<div id="dd_foo" class="dd">
<nav>
LINK
</nav>
</div>
Here is a possible restructure (something like):
<div id="dd_foo" class="dd">
<div class="handle"><!-- Dropdown Handle --></div>
<nav>
LINK
</nav>
</div>
This is what I need the box to look like (notice the faint white border at the top and half way down the sides):
I have also included the box split into its separate elements (handle and background)
I think I can see how this can be done with clever overlaps and nested divs, but ideally I don't really want to resort to this... Can anybody suggest an alternative solution?
Simplest approach
You can try achieving this using a simple box shadow:
.plaque {
box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.32);
/*...*/
}
An Example
Here's an example using 1 class and a div on jsbin.
Copy paste code
This code is only for modern browsers; it might cause ie < 9 and other non supporting browsers to explode.
.plaque:after {
top: -9px;
content: " ";
height: 11px;
width: 30px;
position: absolute;
pointer-events: none;
left: 50%;
margin-left: -15px;
display: block;
background-repeat: no-repeat;
}
.plaque {
width: 250px;
height: 100px;
display: block;
border: 0;
outline: 0;
padding: 12px 16px;
line-height: 1.4;
box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.32);
border-radius: 5px;
border: 1px solid transparent;
font-family: sans-serif;
color: white;
font-size: 1.2em;
text-overflow: ellipsis;
position: relative;
top: 6px;
}
/* Use whatever background you want */
.plaque { background-color: green; }
.plaque:after { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAALCAYAAACZIGYHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAcJJREFUeNqMUktPU0EU/mZuL6Up1RCjC4oRau4t4FJ84EKID/ZAjI9/6Mo/4MadG5dqJGjBatpyuY+2UNreeXDOBE0MNHGSSWZyzvnOd77zicdbd+EVJKyxGPSHmC4XIYSAMQYCoJhn81wJKSnHWhR8D1oZl69yhamiD8GBSefpywc2XKzjy7fP+PDuk5iUJxnksvvkxX1buxkgThOEt5exvr1qJ+XKy5CfvXpow9oSsn6GdqeF40EPK+GKY/ZfTNa3Vm1AI6TdFAeNfQgp0CKgrJehVg1AGl5gJLTWfxGfv15zI3BBnB5CehJGG5Cw8EjY6tw8KjNXsfv9K96//SguMOERgoU6+ic9NH8eQClNGzDQBMLb4FU1fzdxFB+hev0WNnbu2X802TxnkGQJoriNymwZHrFgAbhdidbOK+YTxR0ojLEc3sHmm0dOI8Gq10n9OI1xGLVcMvuGGYyHOYqlKcfK9wvOF3/i12ZvoFK+gsavPUgGSLsJkm4En4xDTqMi45iUZqZdd34zJY7L8was2enoGMHCEmS3l6LxYx9qrJ2I7FTNelBxPlKuYDgYu9nzUe6cenoygqF/J2o7AmcCDACumSjtgWp8aAAAAABJRU5ErkJggg==); }
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;
}