OK, so here's what I'm trying to do (rather a lot more complicated than what you'd guess from the title...) :
My (test) page is : http://83.212.101.132/betdk/home/two
I have integrated this Bootstrap snippet : http://bootsnipp.com/snippets/featured/login-form-with-css-3d-transforms
As you can see, there's the login form on the right side. When you click that gray-ish little triangle at the top right (or left) corner, the form flips.
Now, the thing is :
How can I set some content (centered - e.g. a little icon) INSIDE this gray triangle? (instead of that awkward "sign in -->" thing...)
Tried using content: or something along these lines, but since I'm not such a ... CSS guru, I haven't managed anything.
So,... any ideas?
You can set some content with the :after pseudo-element:
#triangle-topright:after {
content: "A";
position: absolute;
right: 0;
top: 0;
text-indent: 0;
}
#triangle-topleft:after {
content: "B";
position: absolute;
left: 0;
top: -50px;
text-indent: 0;
}
Then you could use an icon font to put an icon in there.
Related
I am using Bootstrap template SB Admin (https://startbootstrap.com/templates/sb-admin/) which has a hide/show side nav using a menu button on click. I want to retain the standard functionality on full screen which defaults to show the side nav unless specifically clicked to close.
On smaller screens/mobile the default behaviour is to hide the side nav unless clicked to open, which is fine however I want the nav to auto-close when clicking outside of the nav div - but only on mobile.
I can't work out how to trigger different behaviour based on breakpoints - any ideas would be greatly appreciated. Thanks.
Are you using the dist files or src files?
If you are using the dist files you can simply add this to your css, no extra jquery or js required.
#media (max-width: 992px) {
.sb-sidenav-toggled #sidebarToggle::before {
content: '';
position: fixed;
display: block;
z-index: 0;
top: 0;
left: 225px;
bottom: 0;
right: 0;
}
}
What this does is when the side nav is set to open, there is a class added to the body tag. .sb-sidenav-toggled.
We are also wrapping this using a css media query to make sure we are only on tablets/mobiles (991px below).
Then on the #sidebarToggle button (when open using this parent body class .sb-sidenav-toggled) is creating a fixed pseudo ::before element (which is transparent) which covers the body area you want to be clickable to close side nav.
The magic is, because this pseudo element parent is the sidebar nav button, it means when it is clicked it triggers the standard close side nav event. And when it closes, the .sb-sidenav-toggled body class is removed, in turn removing the pseudo element.
If you are using scss files in the src folder, then you can use the sass below...
#include media-breakpoint-down(md) {
#sidebarToggle {
.sb-sidenav-toggled & {
&:before {
content: '';
position: fixed;
z-index: 0;
display: block;
top: 0;
left: 225px;
bottom: 0;
right: 0;
}
}
}
}
I have found the technique to customize file input element through putting a regular button in "front of it" and make the file input element with opacity: 0. Like this:
#wrapper {
position: relative;
overflow: hidden;
}
#button-on-top {
width: 200px;
padding: 10px;
}
#file-input-below {
position: absolute;
top: 0;
left: 0;
width: 200px;
padding: 10px;
}
<div id="wrapper">
<button id="button-on-top">Upload</button>
<input type="file" id="file-input-below">
</div>
But why does it actually work that when you click the button "above", the click goes to the real file input button and activates it? Normally, when there's an element "below" another, it doesn't register a click.
Such as with different kinds of overlays where buttons underneath cannot be clicked?
Thank you for an explanation in advance.
HTML files are rendered from top to bottom, so your input field is rendered later. That means if you put absolute to your button the input field slides under it.
But if you put your button below your button will slide under your input field.
If you still want to make it work put to your button an index-z of 1
#button-on-top {
z-index: 1;
}
and your input field should have an lower z-index then your button if you want to make your button clickable
#file-input-below {
z-index: -1;
}
i am using a template from AMP Start.
i have used the amp-carousel.
the arrow images for next image and previous image buttons are on top of the screen and are not visible.
how can i fix this?
image one
image two
Do following things :
.amp-carousel-button .amp-carousel-button-prev {
position: absolute;
top: 50%;
left: 0;
}
.amp-carousel-button .amp-carousel-button-next {
position: absolute;
top: 50%;
right: 0;
}
or else replace default indicators to custom indicators using following link :
https://github.com/ampproject/amphtml/blob/master/extensions/amp-carousel/amp-carousel.md
To dont let hide arrows try to add type=slides in amp-carousel
I am using Font Awesome on a website.
I have a few custom icons and I would like to keep my code consistent, so I would like to use my new icons in the same way as Font-Awesome.
When I look at a font-awesome icon, it would seem that its content is set with the following CSS:
.icon-dashboard:before
{
content: "\f0e5";
}
And then the icon is created as follows:
<i class="icon-dashboard></i>
However, if I have a .png image and try to use it in the same way, it doesn't seem to work:
.icon-network:before
{
content: url("images/network-icon.png");
}
This just shows a blank image. What am I missing here?
Using an image in a pseudo element won't work without further stylng - it won't be given any space (hence you won't see it).
Something like this should work:
.icon-dashboard {
height: 1em; /* Fixed dimensions - scale with line height */
width: 1em;
position: relative; /* Required for inner 'absolute' positioning */
}
.icon-dashboard:before {
content: '';
height: 100%; /* Fill parent */
width: 100%;
position: absolute;
left: 0;
background-repeat: no-repeat;
background-size: 100% 100%;
background-image: url("images/network-icon.png");
}
Things to be aware of when using raster images rather than fonts or SVGs:
Scaling/aliasing issues
Fixed colour
An alternative is to create your own font, which includes Font Awesome ones as well as your own - e.g. https://icomoon.io or https://fontastic.me
If it shows a blank image, that means your pathing is off. The path is relative to your CSS file. Check the properties in your browser of where the image is trying to pull from and that will help you diagnose the issue.
I'm looking to show a div on click. The goal is to use pure CSS only, no jQuery.
Working FIDDLE Demo
Consider that you want something like this:
We write our markup as simple as possible. One element for container, one element for our link and one another element for popup:
<!-- [container] -->
<div class="link-with-popup">
<!-- link -->
<div class="link">CSS</div>
<!-- [popup] -->
<div class="popup">
<div class="box">CSS Description</div>
</div>
<!-- [/popup] -->
</div>
<!-- [/container] -->
Here is our layer structure in picture:
CONTAINER
Let's write CSS for our container.
.link-with-popup {
/* for visualizing */
background: yellow;
/* we need relative, because childs are absolute */
position: relative;
margin-bottom: 10px;
height: 30px;
width: 400px;
}
[!] Note that we make our container relative. Because the children will be in absolute mode.
LINK
We create our link as an absolute element from left, just as shown in the figure above.
.link {
background: blue;
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 100px;
z-index: 10;
}
POPUP
The dimention of popup element is same as the container, so we set all top, left, right, bottom properties to 0.
.popup {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: green;
z-index: 20;
}
[!] Note that z-index of popup element must be greater than link element.
.popup {
/* we won't show the popup yet */
display: none;
}
By now, we'll get this result (check it on jsFiddle):
Now we want the click for our link. This must be done with :active pseudo selector in CSS. But how we must show the poup? We have to get the next sibling element by the link. We use the + selector in CSS:
.link:active + .popup {
display: block;
}
See the result on jsFiddle. But the problem is that when user realize the mouse, the popup will disappear (as it display is set to none).
So we set the :hover rule for the popup and make it block.
.popup:hover {
display: block;
}
Check the jsFiddle demo. Now we get close enough. The only issue that the popup element, hide our link.
But it doesn't matter, because we won't set background for our popup (it will be transparent).
TEXT
For wanted text in popup element, we set this rules:
.popup .box {
position: absolute;
/* note that we make a gap from left to don't hide the link */
left: 130px;
top: 0;
right: 0;
bottom: 0;
background: #505050;
}
Check the jsFiddle demo. Now we have all things that we need.
Now it's time to make our popup element transparent (by setting the background as transparent or simply remove the background: green; rule):
.popup {
background: transparent;
}
And here is the final jsFiddle result. And if you add some extra CSS to it, it can be more stylish. Something like this that I've created.
Some important note to memorize:
In the final result, there is a gap between the link (blue one) and the popup (gray one). But the fact is that the gray element is not our popup. It's a child of popup and our popup is an 100% width and height element on the container.
Working FIDDLE Demo
Another way is to use the :target property (only works in moderns browsers).
Here's a qucik DEMO where I've hidden the div by applying opacity: 0; and the when you click the link the div changes to opacity: 1; The link and the div are matched using a hash in the url.
Here's the code from my example.
HTML
Click me
<br />
<div id="pop"></div>
CSS
#pop {
width: 100px;
height: 100px;
background: #000;
opacity: 0;
}
#pop:target {
opacity: 1;
}
There are some side effects though. The browser will jump/scroll down (not sure if it's possible to prevent this?) to the matched div and since we are using a hash in the url it will effect the browser history and, as mentioned above, it only works in modern browsers.
EDIT If you want to look into other hack/tricks for pure CSS click events, this is a good post - http://tympanus.net/codrops/2012/12/17/css-click-events/