So this evening I've been working on a way to make it easier to add filters to blog pages without JS. This is mainly an alternative to isotope, commonly used in icon, media, downloads, and portfolio pages. CSS only solutions, especially like this, can be intimidating to look at even if you're not new to CSS.
I'm hoping this will take care of the bulk of the work/the more complicated parts so that you can make more complex custom pages without the user having to wait for permission to use JS.
Here's a simple example with just display: none added to the CSS
And on my preview page, I've used the same code and added multiple filter groups and some CSS animations.
If you are familiar enough with HTML and CSS, you can try out what I currently have, but keep in mind you will still need to write most of the HTML and CSS yourself. I want to make a more detailed guide so that it's easier to use soon!
By the way, in addition to the CSS only filters, I also have a CSS only carousel in the works. This one is less complicated than the filters so I don't have a guide or generator for this one currently. Until then, feel free to look at the source code to see how I made it if you want to experiment with it.
As with the filters, this is an alternative to JS so you don't have to wait for approval to use it in your custom blog pages. It has some limitations compared to carousel scripts, mainly a lack of "active" state for slides.
How to add “deactiviated” to a username when you hover over an inactive user, like on the dashboard/mobile.
Note: You have to be using dashboard style captions, using the variables from the default theme. @bychloethemes made a great list of all the blocks and variables for dashboard captions
So, this is the HTML for if a user is inactive/deactiviated
For only the username part, add the class deactivated. (this is because the inactive class also appears around the image, so just using inactive won’t give you the same result)
Here’s a super long masterpost of my favorite coding and design related resources! I’m still experimenting with making banners so I hope it’s okay haha.
coding and learning to code
codeacademy - an amazing starting point to learn just about any coding language
w3schools - this site was honestly really intimidating at first but it’s got information for just about everything web design coding related, as well as tutorials, examples, and live previews for you to experiment with.
css-tricks - as the name suggests, it has lots of neat tricks to experiment with, and it’s not limited to just css either!
codrops - one of my absolute favorite places to go for more complex tutorials and inspiration for more experimental/unique effects.
stackoverflow - this site is basically where people submit coding questions and the online community helps answer them. It’s a great resource and has the answer every single time I’m stumped on something
theme docs - seriously I can’t stress enough how useful this is. Please use this to your advantage!!
CSS viewer - an extension that allows you to see the CSS used when you hover over something
@theme-hunter - an amazing tumblr blog full of resources and inspiration. Base code tag is very useful if you’re unsure how to start making themes.
These Flexbox Guides - Flexbox was super scary to me at first but it’s so useful! Please consider learning how to use it it makes planning layouts and responsive designs so much easier!
Accessibility
w3 - this is the accessibility section of w3, which lists all the guidelines to being accessible and explains why it’s necessary
colorsafe - test color combinations to make sure they are accessible. This is especially helpful to make sure your text is visible to everyone if you aren’t going to do the usual black text on white background.
Colors
colourlovers - collection of beautiful user submitted color schemes
Palettab - a chrome extension to discover color schemes
Fonts
dafont - huge collection of custom fonts
Google Fonts - super easy resource to put custom fonts into your themes!
whatfont - an extension that reveals what fonts are used on a page
Icons
font awesome - I think just about everyone knows this one, but there’s so many icons!!
linearicons - beautiful icons if you want to for for a more simple/minimalist route. Free version doesn’t have nearly as many icons, though.
flaticon - way more icons than font awesome and so many different styles! You can download the icons as svg, png, eps, or psd! (honestly I don’t see svg’s used enough on here they’re so great)
Inspiration
behance - super big collection of not only web design inspiration, but lots of custom fonts as well! I’ve gotten some of my favorite fonts from here.
dribbble - I recently started looking here for inspiration and I love it! I found this has more web design inspiration than behance does, which is more design in general. Dribbble has graphic design things too though.
awwwards - my favorite place to find web design inspiration. The designs here are actual sites you can visit which I really like.
I may add more to this at some point, but that’s all I can think of for now. I hope this was helpful! Let me know if you know some that weren’t on here too!
So this is one of my favorite things to use. The transform property allows you...well transform an element using its rotate, translate, skew, scale, and perspective values.
Let's start with something simple: rotating a div.
So we have a square div. Mine looks like this:
To rotate it, all we need to do is add the transform property with the rotate value. We’ll rotate it 45 degrees for this demo
transform: rotate(45deg);
here’s the before and after:
More examples for the other values under the cut!
Translate is probably the value I use the most. it’s a great way (and much easier way) to move a div without messing with the margins.
I’m going to recreate a similar effect that I use for hover tags/info in my themes.
So I start off with an element, style it however I want, and use the transform property to move it below the post. Now I usually make it invisible until you hover over the post, but for this tutorial I’ll keep it visible.
So when you hover over the container, it does this:
You can technically get the same effect by using margins, but when you use margins, you can throw off the rest of the layout if you’re not careful. transform: translate(); is a safer way to do this.
if it confuses you, it works like transform: translate(x, y); where x is along an x axis/horizontally, and y is along the y axis/vertically.
Skew is not one I use very often, but it’s still pretty cool.
So let’s go back to that red square I made at the beginning. I’m going to make it skew 8 degrees from left to right, and 2 degrees from top to bottom when you hover over it by adding this to my css:
.square:hover {
transform: skew(8deg, 2deg);
}
The result:
Scale is also very handy when you want to make an element larger or smaller without actually changing its height and width.
These three ovals actually have the exact same height and width. The only difference is the first one has
transform: scale(.5);
to make it half the size of the original. The last one has
transform: scale(2);
to make it twice the size of the original.
This is getting a bit long, so I’ll make a sequel to this going into more detail about how this works, and introducing the 3D transforms!
