css

A collection of 32 posts

css

Media Queries

Reading this post, I take you know things like internet(daaah), browser, responsiveness and good music (I can only hope). With that in mind I will continue the story... Every presentation made for the browser (web presentation) in today's world, can be seen through millions of different devices (if the

navigation

Problem Solved: Navigation on Scroll

A challenge we recently faced was that we needed to create a navigation that shows only when scrolling up. How did we solve it? Well, firstly, the HTML for the form was created. Keep in mind that while creating the form, Bootstrap was used. Here we have solved the problem

css

Textarea Tag Busted

The textarea is HTML tag mostly used for messages and comments. It is very similar to inputs, but because it provides an option to have more than one line of text, it is not presented as input [type="textarea"].

css

Unlocking CSS Box-shadow

The box-shadow property is used to add a shadow effect to an element. This is property is used quite often to give depth to elements on a website, so it is useful to fully understand it.

css

CSS Border-image

The CSS border property is pretty familiar. With this property, you can define the color, style and width of an element border. The border-image property, on the other hand, lets you define a gradient or an image for a border.

css

CSS Box-sizing

In the previous article that covers CSS subjects, we talked about the box model. An important property that’s connected to the box model is the box-sizing property.

css

CSS Box Model for Beginners

Every beginner should first start with the basics. In case of CSS, the basics are learning the box model. Before proceeding with learning any other CSS concepts, this is the one you should master first!

css

CSS Animation

The first step in using animation in CSS is transition property. When predefined transitions are not enough or just not suitable, there is CSS animation.

css

Understanding CSS Vendor Prefixes

Have you ever wondered about what -moz- or -webkit- markings in CSS mean? Well, if you have, you are in the right place! Those markings are called vendor prefixes.

css

CSS Reset

Maybe this post should be the first of the firsts because it's about how to start your CSS. Then again, you should be able to understand what exactly it is you're doing so I'm not too much late with this.

css

CSS Formatting

During our work on multiple projects, there often is a confusion on how to use CSS properly. This document is here to provide a clarification. The SASS 3 [http://sass-lang.com/] preprocessor introduces a new syntax known as SCSS [http://sass-lang.com/documentation/file.SCSS_FOR_SASS_USERS.html] which

css

CSS :before and :after

The CSS :before and :after properties are what also known as pseudo elements. They are used to add something before or after the content of an element. There are a lot of great uses for these pseudo elements, and we are here to explore some of them. The Syntax If

css

Input [type="text"] Busted

Inputs are sooo important in the user experience design and it's crucial that their style is perfectly transferred from the design to the page. It's no secret that for a presentation on a web page you need CSS but the tricky part is how to make it as good as possible.

css

CSS overflow

The CSS overflow property specifies what to do in the case a content is too large to fit in the container box. It specifies if a scrollbar should appear, or if a content gets clipped. The overflow property is a shorthand for overflow-x and overflow-y. The overflow-x property specifies handling

css

CSS will-change

The coolest name, isn't it? Well, CSS is changing, and it will change, hopefully by adding more cool-name options. There's a word that will-change is here to change transition [http://kolosek.com/css-transition/] in the transition-transform [http://kolosek.com/css-transform/] relationship. Can I just ask: will-it-change? (OK, I'm done!) It's

css

CSS Bullet Style

Are you a fan of making lots and lots of lists? Neither am I. But, here we are not talking about chore or shopping lists. We are talking about ordered and unordered lists that are inevitable when making modern websites and apps. As mentioned, when creating lists in HTML and

css

CSS Transform

Without the transition [https://kolosek.com/css-transition/], transform property is able just to turn over the object it is applied to. So, in the most real-life situations (real-life?), these two options are applied together. Just Transform Powers which this property posses are: * rotate(angle), * skew(angle), * translate(x,y), * scale(

css

CSS Transition

So, we've moved from text and color in web design to unique, bombshell, explosions... OK, not that much, but we've moved. CSS follow and support those changes and because of that, we have the transition option. This post is closely related to the post that is currently being written and

css

CSS blend mode

Usually, when adding an image to a website, the first thing we do is edit the image in an external software, such as Photoshop. Does the blend mode eliminate the need to use this kind of software? Not really. But, it in a lot of cases you will be able

css

CSS Selectors - The Ultimate List

As a front-end developer who writes approximately 238 lines of CSS every day I needed this. Nothing in the following text is really mine (even though they said that I always added something special...), it is just collected from sources which are available to everyone (not just w3schools [https://www.

css

CSS clear float

A little while ago we wrote about the float [https://kolosek.com/css-float/] property. So, now is a good time to explain the clear property. The clear property is directly related to the float property. It specifies if an element should be next to the floated elements or if it

Sass

Sass Mixins

This is the third post about specific Sass features and this one is about mixins. Previous were import feature [https://kolosek.com/sass-import] and extend feature [https://kolosek.com/sass-extend] and there was one about nesting [https://kolosek.com/nesting-in-less-and-sass/] in general. This feature is used in specific situations, not

css

CSS float

One of the basic and the most important properties every web designer should learn is the float property. It is most commonly used for floating text around the image or creating the two column layout. The float property can cause a lot of frustration and confusion if it’s not

Sass

Sass Extend

Please make sure to read my post on Sass Import [https://kolosek.com/sass-import] because I didn't want to copy-paste first part (it serves as an introduction to this post, as well). Extend represents the next (after import) Sass extra feature and if you set Sass and not use @extend