Category Archives: General

How to Build an Off-Canvas Navigation With CSS Grid

The off-canvas pattern is a classic approach to responsive navigation. When the viewport is small enough to warrant it, bulky navigation is hidden “off-canvas” and only brought into view when toggled. 

Today we’re going to build an off-canvas navigation, using CSS to do the toggling (no JavaScript required) and our good friend Grid to form the page structure. Here’s the full page demo of what we’re working towards.

Basic Page Structure

Let’s begin by building a basic page; we’re aiming for something like this:

Semantic page structure
Semantic page structure

This is a fairly typical semantic page structure; you’ll see that everything remains in a single column for small viewports, then the aside moves across on larger screens. The <nav> element is highlighted in blue for clarity.

Here’s our markup:

Now let’s add some visual styles and some Grid rules.

Gettin’ Griddy With it

Begin by wrapping all our structural elements in a containing element of some kind–this will be our Grid container. I’m using <div class="container"></div>

Now add some basic grid styles:

Here we’re declaring that the container should be display: grid;, that it should have a single column of one fractional unit (not strictly necessary at this point, but we’re added it to be thorough), and that the gap between all grid items should be 10px.

Next add a couple of visual styles to make things a bit clearer:

Make it Responsive

Let’s add a media query, so that when the viewport hits a certain size (let’s go for 600px) the layout changes.

So now, on larger screens, the grid declaration changes to grid-template-columns: repeat(4, 1fr);. This gives us four columns of equal width, so we then have to declare how wide we want each of our structural elements. The header, nav, and footer will all span 4 (span across four columns) whilst the section will span across just three, leaving a gap of one column for the aside to fill automatically.

Finally, some styles to alter the way the nav looks:

Here’s what we have so far:

Venturing Off-Canvas

This is a perfect example of how CSS positioning can still work on structural elements, even within a declared Grid. We’re going to grab our nav, remove it from the document flow, and position it off-canvas. The other grid items will fall into place just fine.

Begin with another media query. We already have our min-width query, but this time we only want to style elements up to a max-width. Up until our viewport reaches that magic 600px we want the nav to be positioned off-canvas:

We’ve given the nav a fixed width, positioning it left by enough to hide it completely. We used position fixed too, though you can also use absolute depending on whether you want the nav to scroll with the window or not.

You’ll also notice the transition rule, which will take effect once we build some toggle controls.

Toggling

Having made our nav disappear, we now need some controls to bring it back when needed. Let’s add a link to trigger it, and a link to close it again.

Add this to the header:

and this to the nav:

We don’t need the open link to be visible on larger screens, so we’ll hide the .toggle elements within our min-width media query:

:target

What’s important in the above links is the presence of a “fragment identifier” (the #nav in the href). These identifiers are used by browsers to navigate directly to specific elements on a page. In this case, we’re targeting whichever element matches the id “nav”, and once it’s been targeted we can style it using the :target pseudo class. No JavaScript necessary!

Add the following to our max-width media query:

That’s it! That’s our toggle.

Here’s what we have now:

You’ll need to take a look at the full page demo to fully appreciate what it’s doing.

Conclusion

And we’re done! I’ve kept styling down to a minimum so as not to get in the way, but feel free to go nuts and make this look exactly how you want. 

You may also prefer a JavaScript toggle, instead of the :target, in which case you have all the pieces in place to make that work too.

I hope you enjoyed this little Grid exercise, stay tuned for more to come!

Useful Resources


Source: Webdesign Tuts+

How to Photograph Textures for Designers

As a designer, you might be looking to photograph textures in a different way than a photographer would. While a photographer might be focused on things like composition and visual interest, you may be looking for versatility and symmetry. It might be a mix of these things, but whatever your need for photographing textures, this article will give you all the information you need to go out and start making your own.

All About Textures

Why Use Textures?

Textures come in useful for a whole range of work in both design and photography. You might want to include textures in your own designs, for use as a background, or as part of a mock-up, for example.

peeling paint
Textures are useful for so many things and make really interesting photographs too. 

Finding Textures

You might decide not to start photographing textures until you actually need one, but if you can, then it’s often useful to snap them out and about as you find them and build yourself a little stock library.

screws and shavings
Shavings, bits of metal work and rust can usually be found at any workshop or junkyard

As you’d expect, texture is everywhere, and once you’ve photographed the everyday stuff, like brick walls, tree bark and the like, then you may want to start thinking about capturing some unusual textures or ones that aren’t around all the time, like ice crystals.

Some unusual places often turn up great, original-looking textures. I once visited a train station which has a reclamation yard behind it, full of rusting trains and other paraphernalia. It was a texture photographer’s paradise, so hunting for places like that in your local area can pay dividends.

How to Photograph Textures

ground
Sometimes finding a great texture can be as simple as looking down, like this shot of the ground

A DSLR and Macro Lens

One of the most important things you’ll need to do to photograph a texture is get up close. With DSLRs, the minimum focus distance to your subject is between that and the focal plane on the camera body, so a lens can’t focus at distances shorter than the minimum focus distance. Don’t worry, you won’t need to do epic amounts of maths to work it out, as, usefully, it’s written on the lens.

Macro lenses are designed to let you focus up close. They’re also what’s known as flat field lenses, meaning that when you’re close to an object to photograph it, you shouldn’t see your image curve as you would if you used a regular lens. This should mean sharper focus right across your photograph.

Macro lenses tend to be prime lenses, at a fixed focal length, rather than a zoom lens. This means they’re generally sharper, faster, and tend to break less often! For a budget macro lens, I highly recommend the Tamron 90mm f/2.8. A 50mm is even cheaper and will do a nice job, but you won’t get as close to your subject as you would with a macro lens.

Macro Setting on Your Camera

If you’re not ready to purchase a DSLR and/or macro lens just yet, then you’ll probably want to investigate macro mode on your camera. This is usually denoted by a small flower icon and will allow you to focus closer than you usually would. Be wary, though—it usually also tells your camera to shoot at a lower aperture, and that could result in softer images. I’ll go into this further, shortly.

Get Your Lighting Right

As with just about all aspects of photography, lighting is crucial in getting a good image. There are some key points to consider with lighting.

water
Water can be tricky due to reflections and movement

Is There Enough of It?

If your subject isn’t adequately lit, then your camera may bump up the ISO, creating noise. You might need to think about using an off-camera light, particularly when photographing indoors.

Which Direction Is It Coming From?

If you’re shooting something reflective, you’d need to avoid direct sunlight shining on it and also unwanted reflections.

If you’re indoors and there’s a lack of light, then set up any external lights to the side, at an angle, to replicate natural sunlight as closely as possible. A single light source is enough for much of the time, but if you find yourself creating harsh shadows, then you may need to place an additional light to balance it out.

How Good Is the Light?

This may all depend on what you want, but if you’re shooting during golden hour, for example, it may cause your texture to differ in colour. Golden hour is generally a photographer’s favourite time to make photographs, as the quality of light is lovely.

Harsh light may bring out the texture of rust or bricks nicely, but wouldn’t work as well for water.

Avoid using your flash, as harsh, direct light like this is rarely flattering and will create a dull, flat look to your texture. Although certain shadowing should be avoided, you still need an element of shadow/shade in your image to avoid it looking flat.

Getting Sharp Shots

Macro mode may not work well for you if your camera opts to shoot wide open, i.e. at a lower aperture. If you’re not comfortable shooting with the camera on Manual, then getting used to Aperture Priority mode (usually denoted with an A) is the next best bet.

wall
This shot is slightly soft around the edges. Shooting at narrow apertures will put more of your image in focus, but it will restrict your light, too.

Try to shoot at least at f/8 or above to keep everything in focus and avoid a shallow depth of field. This does have a knock-on effect with other settings, though. For example, if you’re in fairly low light and you use a low aperture, your camera may adjust the shutter speed, slowing it down and thereby blurring your shot, or hike up the ISO and add noise to your image. You can combat this by using a tripod and experimenting with a longer shutter speed. 

When using a tripod, touching the camera to trigger the shutter can itself cause shake. If you don’t have a remote shutter release, then try using your camera’s timer to delay the picture being taken.

Try Different Angles

Mostly, designers will require the shooting of a subject to be straight on, to be the most useful. Don’t limit yourself, though, and don’t be afraid to experiment with different angles. You can always fall back to your straight-on shot if that works best, but at least you’ll have the choice. You’ll learn over time which angles work best with which textures.

wood
Wood is great because it can be all different colours, textures, and tones. Planks are useful as you can flip them around and have your leading lines going the other way.

As a designer, you’ll know how valuable it is to have packages of similar items to use as textures or even brushes. If you see a great texture, shooting it from different angles or even at different times of day could make a nice package item later on.

Take Your Shots at the Highest Quality

If your camera can shoot in RAW, then it’s always advisable to do that. RAW retains a lot more of the image data than a JPEG, but you may need to install additional software in order to process your RAW files.

Compact cameras sometimes have a RAW + JPEG setting, which means you can shoot in both formats and then decide which to process later.

Post-Processing

When it comes to post-processing, as much or as little as you’re comfortable with is fine. You’re not trying to turn the texture into something it’s not. If you’ve taken your shots in RAW, they can look a little flat and boring, so you might want to think about boosting things like saturation, contrast, and sharpness.

Hopefully, you’ll have got enough right in-camera to mean your shot is good to go and you can simply tidy up any imperfections with spot removal or clone tools.

If you’re fairly confident with post-processing photographs, then you might start to mix it up a little by swapping out colours, enhancing reflections, or even combining multiple textures. 

How much or how little you do all depends on what you want to achieve as your final result.

Leave It to Someone Else

If you really don’t feel like photographing your own textures, or there are things that are tricky to photograph for you, then not to worry. There are plenty of great images available from stock sites like our sister site GraphicRiver.

Jeans Texture Backgrounds by Ufydesign

Jeans
Jeans Texture Backgrounds by Ufydesign and Envato Market

Jeans can look faded really quickly. This selection of denim textures gives you a variety of options, all in high resolution. 

6 Packs Artificial Grass Texture by Keattikorn

Grass
6 Packs Artificial Grass Texture by Keattikorn and Envato Market

If you want neat, patterned grass then you ideally need to find somewhere that takes good care of their lawn, like a golf course, and then shoot from above. This pack offers a selection of grass patterns—much easier!

6 High Resolution Metal Textures by Riddy


6 High Resolution Metal Textures by Riddy and Envato Market

Metals are really hard to photograph well. Unwanted reflections, blemishes, and shine make it tricky to get a picture suitable for use as a texture, so you can take the effort out of it with this handy pack of six.

Conclusion

Photography and design go hand in hand in many ways, and photographing your own textures is a great way to increase your skill set, try something new, or even just to give you complete control and inspiration.

Here are some key points to remember when photographing your own material:

  • Check out the macro mode on your camera, or invest in a budget macro lens.
  • Make sure your light is right. If there isn’t enough, add your own.
  • Shoot at a fairly narrow aperture (f/8 or above) to ensure everything is in sharp focus.
  • Use a tripod to avoid camera shake and to allow you to shoot in lower light without compromising.
  • Try different angles or even shooting the same thing at different times of the day, to give you options and the possibility of creating ‘packages’.
  • Shoot in RAW for the best quality, if you feel comfortable doing so. If not, make sure your image type and size is set to the best your camera can take.
  • Do as much or as little post-processing as you feel confident doing. Usually, a tidy-up of imperfections, saturation boost and some sharpening will do the job.


Source: Webdesign Tuts+

Check Out Our New Guide to Learning JavaScript

Do you want to learn JavaScript? We have plenty of JavaScript courses and tutorials here on Envato Tuts+, but sometimes it can be hard to know where to start.

So we’ve put together a free JavaScript learning guide to take you through the process from start to finish.

What You’ll Learn

The learning guide starts right from the beginning, with the simple question “What is JavaScript?”

It then takes you through the fundamentals of JavaScript and introduces jQuery, a cross-platform JavaScript library that makes it easier to write code for the browser. 

At each stage of the process, the guide contains links to courses and tutorials that go into much more depth, such as:

The guide then introduces you to some popular JavaScript frameworks—both front-end ones like Angular 2 and back-end frameworks like Node.js.

Want to learn about cross-platform mobile development? There’s a section on that too, with information on frameworks like Ionic 2, React Native, and Cordova.

And the guide ends with a roundup of more advanced Javascript resources.

Start Learning JavaScript Today!

We’ve designed this guide to help you learn JavaScript from the ground up. So whatever stage you’re at right now, have a read of Learn JavaScript: The Complete Guide and check out the resources it links to. And if you find it helpful, be sure to bookmark it and use it as a reference throughout your learning journey. 

JavaScript is constantly evolving, of course, so we’ll keep updating the guide with new information and links to fresh resources. You can also sign up to our weekly digests to get a comprehensive summary of all our new code tutorials each week. 


Source: Webdesign Tuts+

The Significance of Visual Context in Web Design

According to results from an oft-quoted study by Missouri University of Science and Technology visitors take less than two tenths of a second to form an opinion about your business website. It is visual context that helps them understand what’s going on, form a solid impression and stay longer. Visuals have a compelling impact on users as they can more effectively deliver a quick message than textual content.

In terms of the written word, the absence of context makes it difficult
for a reader to understand what a writer wants to convey. This happens in web
design as well. A website needs to create a visual context which communicates
the background knowledge and story of the organization it belongs to. 

What is Visual Context?

Visual context refers to presentation of content that improves
the delivery of a website’s message.

For example, the website of an architect may include
a portfolio of successful projects. It is at the discretion of a user to either explore this expertise section or not. But visual context from the outset (the use of imagery, color, space) will ensure the users get to
know the architect’s design knowledge, experience in building and construction, and
administrative expertise all the same.

Take another example of this aerospace engineering company.
The bold display of aircraft and engineering clarifies at a glance their position in the aerospace industry. The user isn’t even obliged to read the banner text.

httpwwwmercaerospacecouk
www.mercaerospace.co.uk

Imagine how that same landing page would appear if we were to remove the images of the aircraft? Undoubtedly more vague and complex. Merc
Aerospace offer a wide range of engineering solutions to different sectors but
are mainly exposed to the aerospace industry, all of which is represented
suitably through visuals.

How is Visual Context Created?

Creating a visual context depends on understanding your users. The perspective of a user changes with age, gender,
and ethnicity. For instance, adding images with white color may encourage a notion of
happiness for one community, but convey signs of sadness for others. Therefore, in order to
incorporate visuals perfectly into a business context, you’ll need to
evaluate the understanding of the people you need to reach, something which user personas can help you with.

The following are some worthy ingredients
for creating visual context:

  •          Images relating to the nature of the business
  •          Infographics to summarize a body of text
    in a scannable way
  •          Arrows, lines, and curlicues to highlight
    numbers or show direction
  •          Selection of words and phrases enrich the visual
    context
  •          Storytelling through creatively woven graphics
  •          Appealing icons for helpful navigation

How Important is Visual Context?

Let’s look at some reasons behind the significance of visual context:

First Impressions Count

As mentioned earlier, users take a fraction of a second to form an opinion about
your website. A more concentrated opinion is reinforced in just another couple of seconds after that. The branding, imagery, and icons have
to create a magnanimous first impression in a short span of time. To encourage users to stay for longer, maker sure visual context gives them an informed view of what the website is about and what it stands for.

It Aids Information Delivery

The visuals of a website have a “sensual” appeal compared to textual context. A user will likely notice the complementary images that are
corroborating the overall context, rather than phrases and paragraphs. However good your story telling, that initial emotional response from the user is heavily dependant on visuals, helping the final conveyance of information.

Better User Understanding

The visual context makes a story live. It makes a user
(unknown to the website) understand a business and its operations. He or she will get the core business idea from the context, then search for
the options, products, and services available. 

If you are pursuing
an innovative user interface, which defies conventions, visual context will help bridge the gap between users and your product.

Emotional Bonds Are Important

Visual context is helpful in trigging the emotions
of a target audience. Take the example of Lend With Care, a microfinance organization. Count the number of human faces on the homepage, instantly giving context and connecting with the user. The warm, soft colors make the website inviting, the smiles convey positivity and a feeling of community.

httpswwwlendwithcareorg
www.lendwithcare.org

Within moments visitors have an emotional bond with the website. 

And this can apply to products equally well–customers can just as likely form connections with a variety of products. As a designer it’s your job to create
visuals which touch the inner senses of a target audience. 

Conclusion

Visual context helps users, especially first time visitors, interpret a website’s characteristics and
values. As a designer, you can use what we’ve discussed–that crucial combination of imagery, color, visual data,
infographics, videos, animation, icons, direction, and all other visual tools at your disposal–to create that all-important context. 


Source: Webdesign Tuts+

Web Development Reading List #169: TLS At Scale, Brotli Benefits, And Easy Onion Deployments




 


 

Everyone here can have a big impact on a project, on someone else. I get very excited about this when I read stories like the one about an intern at Google who did an experiment that saves tons of traffic, or when I get an email from one of my readers who now published an awesome complete beginner’s guide to front-end development.

Web Development Reading List 169

We need to recognize that our industry depends on people who share their open-source code and we should support them and their projects that we heavily rely on. Finally, we also need to understand that these people perhaps don’t want a job as an employee at some big company but remain independent instead. So if you make money with a project that uses open-source libraries or other resources, maybe Valentine’s Day might be an occasion to show your appreciation and make the author a nice present.

The post Web Development Reading List #169: TLS At Scale, Brotli Benefits, And Easy Onion Deployments appeared first on Smashing Magazine.


Source: Smashing Magazine

Web Development Reading List #167: On Team Retreats, Immutable Cache, And Eliminating Clearfix Hacks




 


 

When working in a team, we focus so much on the work, that we often forget that we all have something in common. Something that is so obvious that we underestimate it: we all are human beings. And well, if we want to grow as a team and get better at what we do, we should embrace this fact more. In fact, I just came back from a week-long team retreat where we had team activities, team games, and sessions and discussions about how we can achieve just that.

Web Development Reading List 167

We figured out how much we value diversity, we realized how different the English language and its words are perceived by people from different countries, and we’ve seen short talks on various topics like work-life-balance but also on technical stuff like Docker or intercepting any computer’s traffic with a Raspberry Zero. So if you have the chance to work in a team, use the opportunity and exchange views and share information with your co-workers. Work is part of your life, so why not make it a lovely part?

The post Web Development Reading List #167: On Team Retreats, Immutable Cache, And Eliminating Clearfix Hacks appeared first on Smashing Magazine.


Source: Smashing Magazine

How to Share 360 Panorama Photos With WebVR and A-Frame

In recent times we’ve been seeing a surge in the popularity and technical capability of virtual reality. Typically, when we think VR, we think gaming and dedicated desktop software. However, this is not the only space in which virtual reality is growing.

Through the ever-strengthening power of WebGL, virtual reality is now also making its way into browsers in the form of WebVR, and along with it come new ways to share photography in ever more immersive ways.

With a photo in the right format and a VR device such as Google Cardboard, HTC Vive or the like, a person can be made to feel they’re standing in the exact place the camera was at the time the photo was taken, with the ability to look all around the environment, peering into the depth of simulated 3D space.

And even without a VR device, people browsing the web can still pan all around a spherical panoramic image using a mouse.

Creating Your Own 360 Panorama

In this tutorial we’ll be setting up WebVR-powered 360-degree panoramas in three different ways, using tools that aim to make WebVR accessible and straightforward to use:

To see what we’re working towards, check out demos from each of the above tools, showing the type of 360 image we’ll be making:

Ways to View 360 Images

There are two ways a 360-degree panorama can be interacted with and viewed.

Stereoscopic VR

When a person is viewing a WebVR 360-degree photo through an appropriate VR-ready device, such as a Google Cardboard or HTC Vive, for example, the image will be split into two images and processed in such a way that the headset can use them to generate the illusion of depth.

In this case the person looks around the scene simply by turning on the spot and looking up and down. The device’s accelerometer will update the image display to track with the direction the user is looking.

Click & Drag (Fallback)

When a person is viewing through a device that is not VR-capable, the 360-degree image will fall back to displaying as a single image that can be panned around by clicking and dragging.

Browser Support

WebVR is still somewhat bleeding edge, so some aspects of it are not
widely supported. However, 360-degree panoramas only require a small
subset of WebVR capabilities, so support for at least fallback-level display is
actually pretty widespread.

Desktop Browser

As long as a browser supports WebGL, a viewer will see “click and drag” fallback for a 360 photo. WebGL is now fully functional in all major browsers.

To check if a browser you’re using supports WebGL, visit get.webgl.org. If you see a rotating cube, WebGL is up and running.

Phone-Based VR

Several phones support WebVR when combined with a headset like a Google Cardboard or Daydream. Given Google’s recent push on WebVR, it’s no surprise that its iOS and Android versions of Chrome support WebVR out of the box.

If you have a Samsung Gear VR headset, on the other hand, you’ll need to use Samsung’s own browser.

Full Head-Mounted Display

The way to go about getting set up to view WebVR via a full desktop-powered head-mounted display will depend on the unit in question.

For the Oculus Rift or HTC Vive/SteamVR, you can use either an experimental build of Chromium or Firefox Nightly. The Chromium WebVR build is available only for Windows, while Firefox Nightly is also available for macOS and Linux.

Currently, Oculus Rift only supports Windows, with no reported plans for cross-platform support, so either browser is suitable. However, cross-platform support for HTC Vice / SteamVR is reportedly coming very soon, so if you have this device and think you may prefer to create your panoramas on macOS or Linux at that time, you might wish to choose Firefox Nightly as your main testing browser now.

For full instructions on setting up either of these browsers for WebVR, visit Mozilla VR.

Firefighters battle forest fire in desert conditions
Bert fire, 2016. Firefighters clearing the area on the final days of the fire. Williams Ranger District, north of Parks, AZ. 6-21-16. Photo by Dyan Bone. Credit the U.S. Forest Service, Southweste​rn Region, Kaibab National Forest. CC BY SA.

Getting Started

The first thing you’ll need is a photograph in a format suitable for WebVR panoramas, which you may see interchangeably referred to as a spherical, equirectangular or 360-degree photo. You can take your own by:

  • Using a 360-degree camera.
  • Using an app that allows your phone camera to create spherical images.
  • Stitching multiple images together using software after the fact.

We have some great articles covering some of the techniques you can use:

Alternatively, you can source equirectangular images via Flickr. We’ll be using an image from the Kaibab National Forest for this tutorial. 

Create a directory to house the panoramas you’ll be creating, download the above file into it, and then rename the image to “fire.jpg”.

If you’re planning to view your panorama in full WebVR rather than just as a click-and-drag image in a desktop browser, you’ll probably want to download the “Original Size” version at 10240 x 5120 for maximum visual fidelity. Be aware, however, that users may see a blank white screen while this large image loads, depending on their internet connection. If this will potentially be a problem, choose one of the smaller sizes instead.

NB: later on, if you see a black hole at the bottom of the panoramas you create with this image, it means the file is incomplete and you’ll need to download it again.

Remote Previewing

If you wish to test your panoramas on a remote/secondary device, such as on a Cardboard capable phone, you’ll also want a way to view your files through your local network. You can do this however you’d prefer, but two possible options you might like to use are:

Basic HTML

Each example will sit in its own webpage, so you’ll just need a very basic HTML document to get started with each example:

In the directory for your project, create three HTML files:

  • webvrstarterkit.html
  • aframe.html
  • gurivr.html

Then paste the starter code into each file, changing the content of the <title>...</title> tag if you desire.

WebVR Starter Kit 360 Image

If you were creating a WebVR panorama from scratch, it would be quite complex, requiring fairly extensive coding. However, with excellent frameworks like the WebVR Starter Kit, the process is boiled down to two steps.

All the VR experiences you can create with the WebVR Starter Kit are powered by a single JavaScript file. So to get started, you just need to load that JS file into the <head>...</head> section of your “webvrstarterkit.html” file by pasting in the following snippet:

If you’d prefer not to load this JS file from an external source, you can download the WebVR project from its GitHub repository. You’ll find the “vr.js” file inside the “build” directory.

With the WebVR JavaScript loaded, the page is now ready to have VR elements added to it. To create a 360-degree panorama, insert the following code in the <body>...</body> section:

And that’s it! Your 360-degree panorama is now ready to go.

Note that the value between the brackets is the path to our equirectangular image. This can also be set to load an external image by inserting a URL instead.

When you preview your “webvrstarterkit.html” file now, it should look like this: https://tutsplus.github.io/VR_Panoramas/webvrstarterkit.html.

A-Frame 360 Image

A-Frame is a different WebVR framework, but the means of creating a 360 panorama are very similar to what you completed above. As with the WebVR Starter Kit, A-Frame is powered by a single JavaScript file. Load that file into the <head>...</head> section of your “aframe.html” file with this code:

If you’d prefer not to load the JS file from an external source, you can download the A-Frame repository from GitHub. From the “dist” folder, you should use the minified version of the script for the current version of the project, e.g. “aframe-v0.4.0.min.js”.

Instead of using a script tag in the page body, A-Frame uses its own custom HTML elements. The first element to be added is always <a-scene> in order to create a context for VR elements to be inserted into.

The <a-sky> element is used to simulate a sky in certain scenarios, but it does so by surrounding the viewer with a spherical image, which makes it perfect for 360 panoramas.

Then, to add your 360-degree image, insert the following code in the <body>...</body> section:

Your results should look like this: https://tutsplus.github.io/VR_Panoramas/aframe.html.

GuriVR 360 Image

Under the hood, GuriVR is actually the A-Frame library. What it seeks to do is give an intuitive, straightforward way to set up VR experiences through an editor interface.

To use GuriVR, head to the GuriVR editor. In the editing interface, you can just enter the word panorama followed by the URL to a spherical image, and GuriVR will take care of the rest for you.

Once you’ve done that, click Save at the bottom of the screen, and then click the Share Link button, and you’ll be provided with a link you can give to others to show off your panorama.

Alternatively, you can embed the panorama into a webpage using an iframe element. Update your “gurivr.html” file with the following code, being sure to add your own GuriVR URL into the iframe’s src attribute:

When you’ve done the above, you should get a 360 panorama like this: https://tutsplus.github.io/VR_Panoramas/gurivr.html.

Wrapping Up

You now have three different ways to create WebVR-based panoramas and allow people to connect with your photography in a whole new way. Let’s quickly recap what we covered:

  • WebVR Starter Kit: load the framework’s JS file, add a script tag, and then inside it use VR.panorama() to create your 360 image.
  • A-Frame: load the framework’s JS file, add an <a-scene> element, and then inside it use <a-sky> to create your 360 image.
  • GuriVR: head to the web-based editor, and add the word panorama and then the URL of your photo to create your 360 image. Optionally, embed the provided URL into a webpage via an iframe.

Now that you’ve seen how quickly you can create a WebVR experience from a photo sphere, I hope you’re inspired to get out there and capture the world in three dimensions!


Source: Webdesign Tuts+

Visual Studio Code: My New Favorite Code Editor

In this video I’m going to introduce you to my new favorite code editor: Visual Studio Code. Visual Studio is a Microsoft product, which may come as a surprise to many of you, but put your preconceptions aside for a moment and join me as I show you around.

Visual Studio Code

 

Over the years I’ve used a range of different code editors; TextMate, Coda, Sublime Text, Atom, and each one has had its pros and cons. Visual Studio Code, however, is absolutely my favorite so far, so let’s take a look at some of its features.

Start by downloading the version for your system (Windows, Mac OS, Linux) at code.visualstudio.com (it’s free too).

UI

One of the reasons I like Visual Studio Code so much is its interface; it’s really simple.

It has a couple of sidebars, which can be positioned left or right according to your preference. The first gives you some icons to switch between panels. Choose from Explorer, Search, Git, Debug, and Extensions. Go to View to change the type of display (full screen, zen mode etc.)

Hovering over folders in the Explorer gives us a couple of options: New File, New Folder, Refresh, and Collapse All. Right-clicking brings up a context menu.

Command Palette

Hit Shift-Command-P to bring up the Command Palette.

Within this panel you can search for whatever you like for quick and easy action; Git commands, changing themes, installing extensions–it can all be done via the Command Palette.

Similarly, Command-P will bring up the Go to file… palette.

Terminal

Holding Command-` will open the built-in terminal, which I love.

This opens the terminal directly in the root of your project, saving you from having to navigate. Clicking the + icon opens more terminal windows which can be switched between using the dropdown. This all adds up to a really useful feature, especially if you use compilers when coding.

Git

Another feature I’m a huge fan of is the Git integration. Changes you make in your files are highlighted in various places so you know exactly what’s going on:

In the figure above you can see the sidebar notification telling me of an uncommitted change, the change listed in the Git panel, and a line highlight to show me where the change is in the file itself.

VSC will also show version comparisons side by side, just for extra clarity.

Other standard Git commands such as sync, pull, and so on, are available from the Git panel.

Emmet (Zen Coding)

Great news: Emmet is already built into VSC. No setup or configuration is required, you can just start using it (with Tab being the predefined hotkey to trigger your snippets) as soon as you open the editor for the first time.

Multiple Cursors

When you highlight a piece of code in your file, VSC will automatically highlight all other occurrences of that string. You can then hit Command-D to add another cursor to the next instance, or Shift-Command-L to add a cursor to all instances. Mass-editing, easily.

Settings

The Settings page in VSC is very intuitive. Like Sublime Text, settings are stored in a file (JSON in this case) which allows you to browse all the defaults. By hitting the edit icon next to each setting, you’ll copy it to a custom file where you can make changes:

Hit Save and see your changes take immediate effect.

IntelliSense

IntelliSense is a feature within VSC which I was very keen to try out as soon as I first opened the editor. It’s a super-charged auto-completion, syntax-highlighting assistant and goes a little further than you would expect this sort of feature to go.

Hovering over CSS selectors will give you an example of how you might use the corresponding HTML (very useful for beginners):

Hovering over the properties reveals documentation about what they do, and color values are prepended with little swatches to show you how they appear on screen. Code suggestions when you’re typing are extremely thorough too.

Extensions

Code > Preferences > Color Theme will open up (you guessed it) the color theme palette. Scroll through the examples and you’ll see the UI change accordingly. Hit Enter to make those changes permanent.

Beyond the default themes, there’s also a huge marketplace of other (currently free) examples available, plus extensions of all kinds to play with.

Conclusion

That just about wraps up some of my favorite features in Visual Studio Code, suffice it to say there are many, many more features available for discussion. In terms of my experience using VSC thus far, I can only say it’s been positive. Previously I was using Atom, and I don’t regret making the switch one bit. Of course, you may disagree with me, but in my personal opinion, you won’t go far wrong downloading and taking this code editor for a spin.

Useful Links


Source: Webdesign Tuts+

New Course: This Is Adobe XD

Adobe XD (also known as “Experience Design”) is fast becoming the web designer’s graphic tool of choice. It allows for designing, prototyping, and collaborating with others, all from within one application. 

In our new course, This Is Adobe XD, Envato Tuts+ instructor Daniel White will cover all of the essential tools you’ll need to start designing and prototyping with Adobe XD.

creating a gradient with Adobe XD

Among other things, you’ll learn about:

  • creating artboards
  • fills, gradients, and shadows
  • transforming and aligning shapes
  • object and background blur
  • prototyping and transitions

You can take our new course straight away with a free 10-day trial of our monthly subscription. If you decide to continue, it costs just $15 a month, and you’ll get unlimited access to our full library of hundreds of courses, with new ones added every week.

 

Get free access to our next Adobe XD course

Be the first to hear about our exciting new course on Adobe XD. Sign up now to help shape the course and get free access.


Source: Webdesign Tuts+

How to Make Magic, Animated Tooltips With CSS

Tooltips are a great way to enhance a UI when your users need some extra context for that fancy icon, or when they want some reassurance for clicking a button, or maybe an Easter Egg caption to go along with an image. Let’s make some animated tooltips, right now, with nothing but HTML and CSS.

Demo

Here’s what we’re working towards:

Before we get immersed in the cauldron, let’s take a peek at what we’re actually brewing. The main goal is to have a simple way to add a tooltip, so we’ll do that by adding a custom tooltip attribute:

A Note About Accessibility and Capability 

If you are looking for 508-compliant tooltips, or need smarter tooltips with container collision detection and/or support for HTML content vs. plain text, there are plenty of solutions that use third-party scripts to solve those needs for you. 

“JavaScript is imperative to make fully-accessible interactive components.” – Sara Soueidan, Building a fully-accessible help tooltip…is harder than I thought

This tutorial doesn’t specifically address accessibility needs. You know your users and what they need, so be sure to consider their needs in this respect too.

Let’s Set Some Expectations

  • No JavaScript required
  • We’ll be using attribute selectors (not classnames), with CSS built-in pattern matching
  • Add to existing DOM elements (no new elements required in your markup*)
  • Code examples are prefix-free (add vendor prefixes for your target browsers if needed)
  • Assumes mouseover/hover to trigger tooltips
  • Plain text tooltips only (HTML, images, etc. are not supported)
  • Subtle animations while invoking tooltips

Alright! Let’s Rock This Boat!

Oh, wait. We have an asterisk to deal with first, about “not needing any extra markup”. This is magic, after all. Our tooltips don’t really need any extra DOM elements as they are made up completely of pseudo-elements (the ::before and ::after things) which we can control via CSS.

If you’re already utilizing an element’s pseudo-elements from another set of styles and you want a tooltip on that element, then you may need to restructure a little bit.

Ain’t No Party Like A Tooltip Party!

Wait. Gremlins! One more caveat: CSS positioning. In order for the tooltips to function properly, their parent element (the thing to which we are attaching the tooltip) needs to be

  • position: relative, or
  • position: absolute, or
  • position: fixed

Basically, anything other than position: static — that’s the default position mode assigned to pretty much all elements by the browser. The tooltips are positioned absolutely and so they need to know the boundaries in which their absoluteness has meaning. The default position directive static does not declare its own boundaries and will not give our tooltips a context to push against, so the tooltips will use the next closest parental element that does have a declared boundary.

You’ll need to decide which position directive works best with how you are using the tooltips. This tutorial assumes position: relative for the parent element. If your UI relies on an absolutely positioned element, then some restructuring (extra markup) may also be needed to deploy a tooltip on that element.

Let’s jump in and see what’s up.

Attribute Selectors; A Quick Refresher

Most CSS rules are written with classnames in mind, like .this-thing, but CSS has a handful of selector types. Our magic tooltips are going to use attribute selectors–that’s the square bracket notation: 

When the browser encounters something like this:

it will know it needs to apply the [foo] rules because that <span> tag has an attribute named foo. In this case, the span itself would have a translucent-black background with white text. 

HTML elements have various built-in attributes, but we can also make up our own. Like foo, or tooltip. By default, HTML doesn’t know what these mean, but with CSS we can tell HTML what this means.

Why Attribute Selectors?

We’ll use attribute selectors primarily for a separation of concerns. Using attributes over classnames does not get us any bonus points in the specificity wars; classes and attributes have the same specificity. However, by using attributes we can keep our content with the content as HTML attributes can have values, whereas classnames do not.

Consider the classname .tooltip vs. the attribute [tooltip] in this example code. The classname is one of the values for the attribute [class] while the tooltip attribute has a value, which is the text we want to display.

Now Entering Tooltip Alchemy

Our tooltips will use two different attributes:

  • tooltip: this holds the tooltip’s content (a plain text string)
  • flow: optional; this allows us to control how to expose the tooltip. There are many placements we could support but we’ll cover four common placements:
    up, left, right, down.

Now, let’s set up the ground work for all tooltips. The rules from steps 1–5 apply to all tooltips regardless of what flow we give them. Steps 6–7 have distinctions between the various flow values.

1. Relativity

This is for the tooltip’s parent element. Let’s assign a position directive so the absolute positioning of the tooltip’s parts (the ::before and ::after pseudo-elements) are positioned in context of this parent element and not in context of the page at-large or a grandparent element or some other outer element up the DOM tree.

2. Pseudo-element Prime Time

It’s time to prime the pseudo-elements. Here we’ll set common properties to both the ::before and ::after pieces. The content property is what actually makes a pseudo-element work, but we’ll get there soon.

3. The Dink

I don’t know why “dink” makes sense, I’ve just always called it that. This is the little triangle pointy part that gives the tooltips their speech bubble feel by pointing at the thing which invoked it. Notice we’re using transparent for the border color; we’,ll add in the color later as how we add it depends on the tooltip’s flow.

It’s not a typo that the content: ''; declaration has an empty string for a value. We don’t want anything in there, but we do need that property for the pseudo-element to exist.

To make a triangle we are defining a solid border with some thickness on an empty box (no content) with no width and no height, and only giving one side of the box a border color. For more details check out the following tutorial:

4. Bubbles!

Here is the meat of the thing. Notice the content: attr(tooltip) part saying, “This pseudo-element should use the value of the tooltip attribute as its content.” This is why using attributes over classnames is so great!

Notice the z-index values for both the dink and the bubble. These are arbitrary values, but keep in mind that a z-index value is relative. Meaning: a z-index value of 1001 inside an element with a z-index of 3 just means that the 1001 element will be the top-most element inside that z-index: 3 container. 

The bubble’s z-index should be at least one step down from the dink’s z-index. If it is the same as or higher than the dink, you can end up with an inconsistent coloring effect on the dink if your tooltips employ a box-shadow.

For a more detailed look at the z-index property, take a look at the following tutorial:

5. Interaction Action

Our tooltips are activated by hovering the mouse over the element with the tooltip… Almost.

If you look back at our style block in Step 2, you should see that we’ve used opacity: 0; along with display: none; for our tooltip parts. We did this so we can use CSS animation effects when the tooltips show and hide. 

The display property cannot be animated, but opacity can! We’ll deal with the animations last. If you don’t care for animated tooltips, just wipe out the opacity: 0; declaration from Step 2 and ignore the animation in Step 7.

The last thing we’ll need that still applies to all the tooltips is a way to suppress a tooltip if it has no content. If you are populating tooltips with some sort of dynamic system (Vue.js, Angular, or React, PHP, etc.) we don’t want silly empty bubbles!

6. Flow Control

This step can get rather complicated as we’ll be using some not so common selectors to help our tooltips deal with their placements based on their flow values (or lack thereof).

“Strange things are afoot at the Circle-K.” — Ted Theodore Logan

Before we jump into the styles, let’s take a look at some selector patterns we’ll be using.

This is telling the browser: “For all elements with a tooltip attribute that either do not have a flow attribute, or have a flow with a value that starts with ‘up’: apply these styles to its ::before pseudo-element.”

We’re using a pattern here so these can be extended to other flows without needing to repeat so much CSS. This pattern flow^="up" is using the ^= (starts with) matcher. This allows the styles to also apply to up-right and up-left should you want to add those flow controls. We’re not going to cover those here, but you can see them in use on my original tooltip demo on CodePen.

Here are the CSS blocks for all four flows this tutorial covers.

Up (default):

Down:

Left:

Right:

7. Animate All the Things

Animations are amazing. Animations can:

  • help users feel comfortable
  • help users with the spacial awareness of your UI
  • call attention to things that need to be seen
  • soften elements of a UI that would otherwise be a binary on/off jarring effect

Our tooltips will fall into that last description. Rather than having a text bubble pop into existence and pop out in a flash, let’s make them softer.

@keyframes

We’ll need two @keyframe animations. The up/down tooltips will use the tooltips-vert keyframe, and the left/right tooltips will use the tooltips-horz keyframe. Notice in both of these keyframes we are only defining the desired ending state of the tooltips. We don’t need to know where they come from (the tooltips themselves have that style information). We just want to control where they go to.

Now, we need to apply these keyframes to the tooltips when a user hovers over the triggering elements (the elements with the [tooltip] attributes). Since we are employing various flows to control how the tooltips will show, we need to identify those possibilities in the styles.

Use :hover to Pass Control to Animations

Remember we cannot animate the display property, but we can give the tooltips a fade-in effect by manipulating the opacity. We are also animating the transform property which gives the tooltips a subtle movement as if they are flying in to point at their triggering elements.

Notice the forwards keyword in the animation declaration. This tells the animation to not reset once it completes, but to proceed forward and stay at the end.

Conclusion

Fantastic job! We covered a lot in this tutorial, and now have a neat collection of tooltips to show for our hard work:

We’ve only scratched the surface of what can be done with CSS tooltips. Have fun playing with them and keep on experimenting, and concocting your own recipes!

More CSS UI Tutorials


Source: Webdesign Tuts+