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.
Related
I’m currently trying to wrap my head around solving this layout with Ionic and CSS:
This is the result I achieve even after spending quite some time with it:
I've recreated the basic setup on the home page: here
The layout consists of a navbar, a fullscreen image and text-content below that. The gradient is constructed using a ::after attribute in CSS as I don't want to hard embedd the gradient in the image file with Photoshop and the likes. I had to construct the fullscreen image using a ‚position:absolute‘ attribute:
.happening-image {
top: 0;
right: 0;
bottom: 0;
left: 0;
position:absolute; }
because for reasons beyond my knowledge, not using ‚position:absolute’ results in the image not being displayed in fullscreen but being 2 or 3 pixels smaller than the total width and thus leaving a slim border of background color around the image:
Once I do use the ‚position:absolute’ attribute however my layout becomes a complete mess because the text content is being placed all over the image content.
This is where I'm struggling to come up with a solution that tidly places the text content below the fullscreen image. Using padding is, to my understanding, not possible as quick fix as I need the layout to be independent from the image content:
if I use padding based on the height of portrait sized images, the content gets too much offset when for landscape sized images and vice versa. I could try to target landscape and portrait images using different .css classes for each and setting and matching padding, I do however feel that using padding is not the best solution.
Can someone point me to my error or a robust, content-independent solution here that keeps Image and text content tidly in order while maintaining the layout?
According to your example, the border around the image is happening because of the padding attribute in the ion-content tag, here:
If you remove that padding the image will have no space around.
By the way, the position:absolute; did the trick, because it makes the image get out of the page flow, and so, it acted as a child of the body, which doesn't have any padding/margin around.
Edited
Also, you need to remove the position:absolute from your image and add padding:0; to the tag above it, as it is adding a little space around from padding.
And from what I understood, the image and text will behave as you wished.
I want to overlay the jumbotron component over the carousel to get a sort of website heading. What should I implement to get this working?
You're not being very descriptive or giving us any code, however if I could assume your asking how to overlay two elements, you use the z-index property in CSS
I need to create a pictures slider that looks like this:
The pictures need to lay one on each other on such way that the user could see the first picture on full size and some fraction form the others. Is there any way to do it on css only? Is there any available addon on the internet that give some solution for that?
You can use bootstrap-carousel for it and change the position and styles of the carousel indicators by applying your custom classes to them. Here's the link for bootstrap carousel.
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.
I am trying to use css shapes instead of images wherever it seems appropriate.
Currently i'm aiming to add a white triangular shape to the end of my <li> links like so:
Here's a JSFiddle for you to tweak.
I've been with it for a while but as a novice developer I haven't been able to find an approach! The navigation bar stuff is at the bottom of the css and the html. I'm trying to keep the result responsive by using em and percent where possible and really this triangular shapes height needs to be the same as the nav_option class (which can double in height if the texts gets knocked onto the next line by window adjustment)
Any advice / solutions? Much appreciated!
Edit: if this is not possible due to my relative font-size then please detail an alternative solution? Suggesting the use of Javascript is helpful but a bit to vague for a novice like me.
Because you are using the border hack to make this shape, the measurement you need want work with, font-size, cannot apply. You will need a JavaScript solution to detect line-wrap and adjust the border dimensions accordingly.
The font size is relative with font-size of ascendant element, doesn't with width or height of parent element. So, to use responsive font-size, try to use some jquery plugin (FitText) or build a your JS.
http://fittextjs.com/