I am looking to create a left nav bar like the one on the Treehouse site here:
http://teamtreehouse.com/library
The main thing I am trying to replicate is the links tooltip that slides out/fades in beside the icon. Looking at the source, I believe thats done through CSS? correct me if I'm wrong.
Also, I noticed they have svg classes on the links, are they just for site responsiveness and not really related to the function of the links/tooltip?
Thanks for any help on this and please let me know if I can provide any other info.
For the bar itself simply have floated div extended to 100% height and set it's position to fixed.
The tooltips that pop out can either be done with javascript or CSS.
For javascript or jQuery, there are numerous tooltip libraries that will give you the same functionality. In CSS you can add a hover state that shows the div. Either one of these approaches will work.
For the CSS solution see this related question: Using only CSS, show div on hover over <a>
The SVG class on these from what I can tell is actually the icon itself. SVG is a neat format that lets you apply font styling to images. If you look at the bootstrap framework icons you'll see this is how they are displayed. I'm guessing that the same technique is being used here.
Related
CSS Custom Scrollbar style
I've been having a hard time customizing the scrollbar the way I intend and maybe it's not even possible.
I want to add a custom image to the scrollbar-thumb background with rectangles on both ends of it. The conceptual idea is to be able to keep top and bottom of the scrollbar-thumb with a custom icon image, but I represented it as a rectangle in the example.
Since the size of the scrollbar is not always the same I'm looking for a way to achieve what I described before.
I've failed to do it using ::-webkit-scrollbar.
Visual example:
I saw the Google Material Design website and was amazed by the change of color of the left, sticky "speech bubble"-image when you scroll down.
I am trying to understand the concept but Google's code is huge and somewhat confusing...
I think there are actually two images, but I cant recreate it just with different z-index values alone (I can let the first image disappear and the first appear but in combination it doesn't work).
Do I need a JS-library for that? Waypoints/scrollreveal etc., is this some kind of SVG magic or am I overlooking a simple solution?
on simple usage try onScroll() method using js for applying basic css colors on your element.
I believe those are animated objects, and the sections (their containers) have overflow:hidden, so those objects stay within their sections.
Also they probably have position:fixed and positioned using'top' and 'left' properties to stay on place all the time (or probably some JavaScript magic).
And ther animation is launched using JavaScript function scrollTop(), when visitor is on a certain distance from a page top.
I'm not sure what is used in this exactly page, but you can change and adjust scale, size, color and transparency depending on position from page top using JavaScrip - 100%.
I'm having trouble with my code with my CSS stylesheet and HTML index coding. I only have one problem and that is my CSS stylesheet isn't letting me place a div class into it. I'm using the free Brackets software which includes syntax highlighting and it's coming up red which is an error. Here is a picture of it:
http://i58.tinypic.com/ju97cl.png
As you can see in that picture, I've boxed around the place where it's disallowing me to place the div class into the stylsheet in white. I've given a working example with the blue box so I'm confused to why it's doing this.
My main question for you today is how do I create buttons directly in the center on the side of my page with CSS or however possible and how to edit these buttons like adding hover animations, visual looks etc? (I'm new to this by the way) Also, I want to lock the scrolling of my page in a certain area like in the picture described:
http://i62.tinypic.com/wmbyw.png
Lastly, I wish to ask how to make my content on the white area transition by sliding to the side for when I click a button to go onto the next page. However possible I would really appreciate if somebody gives me the time for this. Sadly I can't give another image because I don't have 10 reputation. so I hope you can make out what I'm trying to say.
I will be so grateful to anyone who helps me with this.
First off you need to close your .right-menu class with a }.
For effects and animations check out w3schools:
http://www.w3schools.com/css/css3_transitions.asp - transistion property
http://www.w3schools.com/css/css3_animations.asp - animations
Centering in CSS can be done with text-align: center or margin-left:auto; margin-right: auto.
To prevent scrolling of the body do body {overflow:hidden}
For sliding page content refer to my links above or checkout jQuery
http://www.w3schools.com/jquery/jquery_slide.asp
I'm looking to create an html/css gallery with no spacing inbetween each gallery element. Just for some context, all the gallery elements are the same size and are list items contained in a ul inside a div. I already have media queries set up to readjust the rest of the site and the gallery image sizes. However the actual elements are inline-block so they adjust themselves. I want to know how I can make the elements so they animate to their new positions instead of just snapping to them. Adding the standard transition values to the css of any gallery related item didn't seem to work. I'm not sure if I need to change my markup for this to work but any help would be appreciated!
Animation can not be achieved with css alone. You will need some javascript. I would advise you to have a look at jquery.
Basically, I am using Iframes on my website, and I have a 200px bar on the left which I am using for navigation. There are several links here, of which when I hover over them the text and background colors invert (so you can see it, basically).
What I want is that so the background color will span the whole of the navigation frame - currently, it is only a small square around the box. I want it to look like this at any resolution and so far... my attempts have been useless.
I am using HTML and CSS, and would preferably like a solution using those languages.
Thank you for your help.
I'm fairly sure this can't be done without the use of JavaScript. Consider the code at
http://jsfiddle.net/ZPzBL/
the a:hover only allows the style of the link to be changed.
If you want the whole div to change colour (which, if I've read your question correctly, is what you want), then using purely html, you'd need to have a style with .wrapper:hover, such as this:
http://jsfiddle.net/ZPzBL/1/,
but this means that the whole div changes colour as soon as you hover over it.
Essentially, CSS only lets you change the style of the element being hovered over at that time. Any other changes to the DOM need to be handled by JavaScript. You'll probably want to have a look at http://api.jquery.com/hover/