Blog Code Snippets CSS

Curly Opening Quote on Blockquotes

Use this CSS Code:

blockquote::before {
color: #692100;
content: ‘“’;
font-family: “equity-text”;
font-size: 100px;
font-style: normal;
position: absolute;
line-height: 0.6;
margin-left: -45px;
margin-top: -5px;

Blog Code Snippets CSS

Ugly Form Fields on Mobile, particularly Select Field and Submit Buttons

Are you experiencing ugly form fields on the mobile devices which look nothing like the very cool and awesome fields which you built for the desktop version? That could be because its using the browser’s default css for the input and select fields and buttons.

I’ve experienced this on my iphone but it could happen with other mobile operating systems and browsers also.

This bit of code will eliminate that effect.

input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
Code Snippets CSS

Install a new font .otf file using css

First step: upload the .otf to the server so its accessible by the css file.

Add this bit of code to the top of your css file to activate a new font using its .otf file.

In this case, the .otf file was placed in the fonts folder on the same level as the css file.

@font-face {
font-family: 'Arial';
src: url('./Arial.eot');
src: local('Arial'), url('./Arial.woff') format('woff'), url('./Arial.ttf') format('truetype');

Here’s how to use that newly added font. The font name below must be exactly the same as the defined “font-family” name above.

body {
font-family: 'Arial';

Blog Code Snippets CSS

Smooth Transitions

Add this bit of code to ensure smooth transitions of elements:

* {
-webkit-transition: all 700ms;
transition: all 700ms;

This will apply to all elements and for all types of transitions; whether its related to the element’s height, width, positioning or font size.

It is especially useful for mobile responsive when the element size has to be made smaller to fit the device. By using this smooth transition, the change looks smooth and nice to the end user.