Tag Archives: css

CSS Web Links

Tridiv – In-browser CSS 3D Editing

I’m a sucker for clever web things, and today’s link is no exception.  Tridiv is an interface where you can create 3D shapes in CSS, and all without knowing how to make 3D shapes using CSS at all.

tridiv main

The interface is extremely cleverly put together, and literally allows the user to create 3D objects as they might be used to in some other 3D editing interfaces.  There’s a top, front and side elevation, and a handy window for you to move and rotate your newly created object.

tridiv interface

Basic primitive shapes are included in the mix (cuboid, cylinder, prism and pyramid), which you can add to the scene, after which you can rotate, enlarge, and move to your hearts content.  Colors and opacity can be manipulated too, giving you the means to make some pretty spectacular 3D shapes if you wish.  Lighting, shadows and images can also be added to your creations, giving you the ability to make some pretty impressive things.

Once done, you can save for use elsewhere, or even export to Codepen to share with others.

Some have criticised the project based on its practicality, but I personally think it’s a fun little tool that really demonstrates how far the web has come along.  And it was made by just one person!

Only downside is that it currently only works in Chrome, but Julian Garner has claimed he is working on versions for other browsers soon.

To really see what could be done with it, check out this demo on Codepen, created by the developer himself!

CSS

CSS tip: Removing borders around an input control when it has focus

When you click into a text input field in Chrome, you’ll notice the border changes to indicate it has focus.  Let’s have a look..

Here is the input control before it has focus:-

beforefocus

And here it is when it has focus:-

withfocus

It’s a handy visual cue, but what if you don’t want that to happen?   It’s quite easy to fix – just create the following rule in css for your input control.  In my example, I’ve created a class named ‘nofocus’ so that I can apply it to any controls on my page:-

.nofocus {
outline: none;
}

And my text input control looks like this:-

<input class="nofocus" type="text" />

Simple, isn’t it? I believe safari does something similar albeit maybe with a different outline colour.

 

CSS

CSS: Creating a polaroid-style image using CSS

Polaroid is quite an iconic brand, and instantly recognisable for its retro look.  In this simple tutorial, I will explain how to create a polaroid-style effect for photographs on your pages.

First of all, let’s create a simple html page which contains a header and the image we want to use.  My starting html looks like this:-

<!DOCTYPE html>
<html>
   <head>
      <title>Polaroid effect in CSS</title>
      <link rel="stylesheet" href="pol-style.css" />
   </head>
<body>
      <h1>Polaroid-style border effect using CSS</h1>
      <div class="polaroid">
          <img src="polaroid-images/doggie.jpg" />
          <h2>This is my dog</h2>
      </div>
</body>
</html>

It’s a fairly simple html file, with a link to a stylesheet and an image in separate folders for the project.  I’ve created a div with class name of ‘polaroid’, which will be used to style the image to make it look like a polaroid.  As far as HTML goes, that’s it.  The rest of the work will be done with the CSS.

So far then, we have this:-

polaroid-initial

Nothing much to get excited about, really, apart from the dog (which isn’t mine, by the way – I got the image from here).

Right, then.  So, how do we make the image look like a polaroid?  Here’s the CSS I used:-

body {
    background-image: url(polaroid-images/dark-noise-1.png);
    font-family: arial;
}

h1{
    color: white;
}

h2 {
    color: black;
    text-align: center;
    margin: 10px;
    font-weight: normal;
}

.polaroid {
    background-color: white;
    display: inline-block;
    padding: 20px 20px 0 20px;
    box-shadow: 10px 10px 5px Black;
    transform:rotate(4deg);
    -ms-transform:rotate(4deg);
    -webkit-transform:rotate(4deg);
    -moz-transform:rotate(4deg);
}

And the page now looks like this:-

polaroid-finished

There’s a lot more we could do to this, but I wanted to keep things simple.
The finished product can also be viewed here.

CSS

A silly little CSS3 thing

Just playing around and doodling with some CSS3 stuff and came up with this.  Nothing special, but it does show some of the cool things you can do just using CSS and one element.  I need to explore this further – more to come soon, hopefully (when I’ve managed to get my head around it further).

css3logo

Here’s the HTML:-

<div class="bigcircle">
</div>

And, here’s the CSS:-

  .bigcircle {
  width: 0px;
  height: 0px;
  border-right: 60px solid #599ebc;
  border-top: 60px solid #a75bc2;
  border-left: 60px solid #f4fd71;
  border-bottom: 60px solid #ffbd72;
  border-top-left-radius: 60px;
  border-top-right-radius: 60px;
  border-bottom-left-radius: 60px;
  border-bottom-right-radius: 60px;
  box-shadow: 3px 3px 9px #27242a;
}

.bigcircle:before {
  width: 80px;
  height: 80px;
  display: block;
  content:"";
  position: relative;
  top: -42px;
  left: -42px;
  border-radius: 50px;
  background-color: white;
  border: 2px solid black;
}

.bigcircle:after {
  content:"";
  display: block;
  border-left:25px solid #f86f7f;
  border-top: 25px solid #ffd072;
  border-bottom: 25px solid #9160c4;
  border-right: 25px solid #7fe265;
  -webkit-transform: rotate(45deg);
  position: relative;
  top: -109px;
  left: -25px;
  box-shadow; 5px 5px 5px black;
  z-index: 1000;
}

I’ve only tested in Chrome. Here it is on Codepen.