Contact Section
We would love to hear from you!
×
display & position
properties
Displaycement
A guide on properly using display as well as position because of displacement, bad puns, and their synergy. The post also discusses centering in both CSS properties.
read more »
transform & filter
properties
Lights! Camera! Filter!
Wondering on how you might filter some HTML elements or pictures? Take a look at the guide and see how you might set elegance on those!
read more »
pseudoclasses
good styling
Pseu Do They!
If adding stuff to classes creates effects, so do pseudoclasses. Learn how some pseudoclasses work and how to effectively synergize them with certain elements.
read more »
events
javascript
Something's Happening
Ever wondered how to create interaction on elements using JavaScript? Take a peek and find your answers. (Or you could go to W3Schools.)
read more »
appending
javascript
Appending Addition
Learning how to append stuff to the site via JavaScript can be a nifty and handy skill. To learn more, view this post (or, again, get started by going back to the splash).
read more »
picture plight
good styling
Picture Plight
Having trouble with pictures? You can say it's comPICated, right? I'm out of bad puns so I'll stop. This post discusses some tips on choosing the right images for your site.
read more »
CSS: Display and Position
Article: Displaycement
There are many, many valid values for the display property, while there are at least six values possible for the position property. However, I'll summarize them to the essential things you'll need to know!
One important component for web layouts is that there are four essential values for display. By default, all elements are set to display: inline; by default. However, the <div> tags created in the document are automatically set to display: block;.
  • display: block; is the default setting for the <div> tags. Elements possessing this property always start a new line, unlike elements with display: inline; which always takes as much space on the same line as possible.
  • display: flex; follows a flexbox model: when its children-elements have no specified width or height, they will occupy as much space in the viewport width or height (of your device) as possible, even compressing them so much.
  • display: grid; much like the previous type follows a box (i.e. grid model). However, unlike flexbox, you have an easier access to control the measurements of the layout via rows and columns.
  • display: none; removes the element from the site. The website will act as if the element really wasn't there, in contrast to an element set in visibility: none; where the element will not show but still retains some position. That's how it is, sadly.
The other important component is the five essential values of the position property. This gives you control over certain elements; with this property, you can decide whether the element always sticks to the screen or fulfill the want of elements following some straight line.
  • position: static; is the default setting for all elements. This is the only value of position that is not affected by the top, bottom, left, and right properties, which we'll collectively call positional properties.
  • position: fixed; forces the element to be placed relative to the viewport or what you can see on screen. Elements possessing this property will always stick on screen even with all the scrolling action.
  • position: relative; acts like position: static; by default. However, it can be affected by the positional properties mentioned above. These properties will nudge the element to some direction relative to its original location. For example, an object having a relative position and top: 10px; will be found 10px below its previous location.
  • position: absolute; enables a position relative to a non-static ancestor or parent element. If there are no such ancestors, then it will position relative to the document body. For example, an object having an absolute position, no non-static ancestors (or no position was set), and left: 25px; will be found 25px away from the left side of the document.
  • position: sticky; will initially act like position: relative; until a certain extent is reach via scrolling where it acts like position: fixed;.
This may seem off-topic, but I'll discuss it anyway! How would we even center some objects with all these display and position properties in the equation?
  • With display: flex; as a setting, you can center its children-elements by including justify-content: center; and align-items: center;. Do note, that the default value is flex-direction: row;, so justify-content and align-items would work on an x-axis and y-axis, respectively. It will work oppositely for flex-direction: column;.
  • With display: grid; as a setting, use justify-items: center; and align-items: center;. It will center the children-elements along the x-axis and y-axis, respectively.
  • For centering an object using position: absolute;, consider first if it's going to be relative to a parent container or the whole site. By simply typing position: relative; (or any non-static value) to some parent container, you will force the target object to position relatively within the parent container. Then, top: 50%; and/or left: 50%;. Define some width and height, and set the margin-top and/or margin-left to the negative half of the defined height and/or width, all respectively.
Whew, seems to be too much stuff for a first post! I recommend that you check out these references to learn more about these wonderful and crucial properties.
×
CSS: Transform and Filter
Article: Lights! Camera! Filter
You must have already visited the Splash Page of this website. Did you come across a background image? The fact is I didn't use the background-image property. If it was neat and you'd love to know how it was made, keep scrolling!
The visual effects you must have seen are the blur effect provided by the filter property. While filter has several values, like display, we'll go around four possible values. Do note that this is more commonly used for <img> elements.
  • filter: blur(<length>); adds a blur on the element. The length defines "how many pixels blend into each other." Although the parameter is length, percentage values aren't accepted. Also, if you use a small value for the length parameter (in pixels), and you zoomed out, the element will appear as if it wasn't blurred. However, if you zoom in, the element appears to be more blurred. The blur effect is good if you want to emphasize some text directly in front of the element (usually picture). It's also good if you want to cast some mystery to the element. When you blur a picture, a margin of white is created. You'll know later how to resolve it!
  • filter: grayscale(<percent>); adds a gray effect (or black and white effect) to the image. If you want a touch of 1900s to your pictures, try this out! If you want to add some memorial element to that element, try this out. The percent determines how "gray" the picture is supposed to be. A value of 100% (or 1) means that the element is fully gray.
  • filter: invert(<percent>); allows you to control how much of the colors of the elementare inverted. A value of zero doesn't change the tone of the element, while a value of 100% (or 1) completely inverts the element.
  • filter: opacity(<percent>); adjusts the transparency of the element. To be quite honest, the opacity is more frequently used. They have the same mechanics: no negative values allowed, values are between zero and one. A value of zero means that the element cannot be seen since it's totally transparent, though it's still in place according to the document file, unlike display: none;. Use this if you want some "slightly better" transparency.
Now, as mentioned earlier, some margin of white appears if you use filter: blur(<length>); on pictures. How do we resolve this? One way of effectively removing them is by using transform: scale(<multiplier>) on the element with the filter. There are more values (and parameters) for the transform property; I'll give two examples and some of their variations.
  • transform: scale(<multiplier>), in simple terms, zooms the image. Without any restrictions on the parent container where the element is, it can actually go over and overlap. An easy solution is to set a height or width and add overflow: hidden; on the parent container. This transform value is a shortcut to scaleX and scaleY. If two parameters are placed instead of one for the <multiplier>, the first parameter stretches the x-component of the element, and the second parameter stretches the y-component.
  • transform: rotate(<angle>) rotates the element along a 2D plane. The <angle> unit could be in degrees (deg), turns, radians (rad), or gradians (grad). One full rotation is equal to (360deg), (1turn), (2πrad), or (400grad).
I found a demo for the transform property at https://developer.mozilla.org/! Also, do check out these links for a more expanded discussion on both of these properties.
×
CSS: Pseudoclasses
Article: Pseu Do They!
When we make websites, we should usually aim to make it more interactive. This is where pseudoclasses come in. We use pseudoclasses when we want to select some certain state of an element, like when we hover or when we click it. We can also use them if we want to select certain elements, especially when picking odd-numbered elements or the last of the element within a container. Pseudoclasses are not really classes (hence the prefix pseudo-) but they do function well as selectors.
Let's first discuss pseudoclasses related to links or <a> tags with href attribute as well as the special states of the elements. This category is called dynamic pseudoclasses. There are four of them here.
  • The :link pseudoclass only selects the <a href="[someClassName]">. This is useful for targetting elements that may lead somewhere outside the document page (or even local links, like href=#[someIdName]).
  • The :visited pseudoclass selects the <a> tags that have been clicked (specifically, visited) previously. Normally—hen there are no CSS associated with these <a>—when links are clicked, the color changes from blue to purple.
  • The :active pseudoclass selects the state of an element when it is being clicked. This is most likely the second most used pseudoclass in this category.
  • The :hover pseudoclass selects the state of an element when the cursor is directly above the element. Generally, this is the most used pseudoclass.
There is also another type of pseudoclasses called the structural pseudoclasses which select elements relative to their order within a parent container. By default, the count goes from top to bottom, or cascading (hence CSS).
  • The :first-child selects the first of that certain class within the parent container. In other words, it selects the top element (based on the coding of HTML) with that class.
  • The :last-child selects the bottom element with the said class.
  • The :nth-child([expression]) allows you to select elements using an algebraic expression. This is best when you want to select elements systematically (or for every nth element) or when you want to have different effects on odd and even. You can even use it if you want to select the first n elements.
  • The :not() selects the state that is not indicated within the parenthesis. To make this clearer, putting :not(:hover) will select the events wherein the element isn't hovered. div:not(.active) selects all the <div> tags that do not have the class "active." This pseudoclass cannot be nested; div:not(:not) does not work!
Here are other CSS pseudoclasses you may find useful especially in using <input> tags.
  • :invalid selects inputs that whose requirements are not met. For instance, an input missing an '@' at the e-mail address input will be selected. This is usually good if you want to let your audience know what is wrong with the input given.
  • :focus is like an after-active effect. This is frequently used for elements requiring input and you want your audience to keep track on what they are currently typing on.
With regards to synergizing these pseudoclasses with JavaScript, you can actually perform actions if there are more classes added to a certain element. With JavaScript, you can change the class name of an element using the .className property. Remember, the styles applied on the element will depend on the specificity. For instance, an element with class="active round" will have a yellow background color under .active.round rather than the red background under .round since the former was more specific.
Thanks for reading! Here are the links for reference.
×
JavaScript: Events
Article: Something's Happening
Every time something happens, that's an event. Click an element, that's an event. Hover over an element, that's an event. When you don't hover over an element, that's still an event. Want something to happen when some event happens? This is where JavaScript comes in!
Let's not use lists, this time. We'll go over through some of the most commonly used event types. How the user triggers these event types is pretty much self-explanatory, so instead we'll also go to the best examples on executing these events.
The first type is onclick, undoubtedly one of the most dynamic event types. This event is triggered when the user clicks on the element. The perfect example for using this event type is using sliders, where the parameters are numbers which affect how far from the left the slider goes. Oh, the format for calling a function is functionName([parameter]). That's it; onclick is so dynamic, it can be used for a lot of many things.
The second type is onmouseenter. This event functions a lot like :hover, except that it only occurs once the cursor "enters" an element. A more repetitive version of this event is onmouseover, where every time you move the mouse within the element, the event occurs. Think of this event as onclick without the need to click. Anyway, the gist of this is that onmouseenter function acts like :hover and is mostly useful when you want to create interactions like lighting up the navigation tab that corresponds to the position of the cursor on the page.
The third type is onmouseleave which is the opposite of onmouseenter. The former works similarly to onmouseout, which is the opposite to onmouseover. Think of both of the outgoing events as :not(:hover). Normally, when using these types, the effects revert to normalcy, or not in hover-mode.
The fourth type is onload which triggers actions when the document page is completely done loading. I recommend using this if you want to randomly generate some content in your page upon loading.
The fifth and final type I'm going to discuss is onbeforeunload, which is mostly used to warn the user before leaving the page and going to an outside link.
There are many possibilities in using JavaScript events. Visit https://www.tutorialspoint.com/ for more information about the topic.
×
JavaScript: Appending
Article: Appending Addition
Appending. Lowending. We name it! (Boo, the author sucks.)
Appending is an action where you get to insert a usually newly-created element from JavaScript to HTML. The format of appending is parentContainer.append(child). You can also replace the "parentContainer" part with $([selector]) to insert an element to another certain element without needing to create a variable getting a certain ID. The format of the selector is similar to the way you target something in CSS. You could have div#active.round as a selector.
One way of using append is creating custom alerts. These alerts should already have some sort of template by using CSS. You must also have another container with an id or class although the former is more preferred. Using appending, we can insert the alert to that container. We can also append some text to the container, although this is less used.
Appending is a very useful for adding stuff while requiring interaction. Check this link for an in-depth info regarding append.
×
Getting a Great (Pic)k
Article: Picture Plight
Let's start with the cliché quote that pictures paint a thou- okay, that's too repetitive. I guess I'll start discussing on getting good images straight away. However, there'll be a catch when getting high-quality images though. Keep scrolling if you want to take the small risk. (It's not really a risk since it's part of loading a website.)
The best avenue to get good images, for a starting point, is Google Images. You can reliably search images and even specify the quality of the picture you're looking more. You can even specify if you're looking for "HD" pictures. I recommend using higher dimensions because, from my experience, using image that display as large elements on website is more likely to provide high resolution. However, this applies more to wallpapers. If you can apply that to other pictures that are non-wallpapers, it would still display an awesome effect.
Getting relevant images is also key to a successful delivery of your website. Though, don't stress too much on relevant and make your pictures match each other. Too much pictures of the same topic can be boring and unoriginal. While too less doesn't provide much detail, too much isn't good, either.
Lastly, in terms of file type, use JPGs for photographs and PNGs for graphics, that's it! Hopefully, you'll find good pictures for your site. Sorry for the lack of pictures in these articles since I really didn't find relevant images. Anyways, stay safe and healthy, guys!
×