Category: CSS

CSS update style file with PHP to see the last results / avoid cache

Use this little PHP trick to upgrade your dev skills and avoid wasting lots of time…

1
2
3
<?php
echo '<link rel="stylesheet" type="text/css" href="style_file.css?' . filemtime('style_file.css') . '" />';
?>

Remove iOS input / textarea shadow mobile browser

1
2
3
4
5
6
7
.class_of_input_textarea {  
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

Use this simple code to remove the default shadow that styles the input and textarea fields.

CSS: Submit button looks smaller than input and textarea (solved)

1
2
3
4
input, textarea, .button_style {
box-sizing: border-box;
-moz-box-sizing: border-box;
}

When your <button> or <input type=”submit”> looks smaller than the input fields or textarea, just use the code I used above this text and see the results: the submit/button looks the same size as the other form fields.

PHP + MySQL + jQuery = fuel-prices.eu

I developed fuel-prices.eu as a side project using data from the Weekly Oil Bulletin provided every week(or almost) by the European Commission. PHP and MySQL helped me with the back site work and chart.js helped me a lot with the chart and data representation of the Diesel and Euro-Super 95 data flows.

The data range is from 2015 inclusive to our present week.

I also have in plan to add to the database all of the data beginning from 2009, that means a lot of PHPmyAdmin work for me in the next future.

For more informations about this project you can contact me.

Display as you type input value in div and input type populate with the same text with jQuery

Some situations need a special way of thinking regarding functionality and automation.

This little script sends the text typed in a form/input type to a div and also to another input type so that you can use in many ways the final result – the POST or GET variable created. Also the fist input type works with its defined name.

You can see a working demo here: DEMO

CSS / HTML make text / element blink

1
2
3
4
5
6
7
8
.blink_me {
  animation: blinker 2.4s linear infinite; font-weight: bold;
}
 
@keyframes blinker {  
  50% { opacity: 0; }
}
 

This simple CSS code can make a text / element blink, you just need to set the timer in seconds and provide the element that you want to blink with the .blink_me class.

Click for DEMO here.

Free PHP, HTML, CSS, JavaScript/TypeScript editor – CodeLobster IDE

In this article, we suggest you to get acquainted with the free editor of web languages – CodeLobster IDE. It is presented on the software market for a long time already, and it wins a lot of fans.

CodeLobster IDE allows you to edit PHP, HTML, CSS, JavaScript and TypeScript files, it highlights the syntax and gives hints for tags, functions and their parameters. This editor easily deals with those files that contain a mixed content.

If you insert PHP code in your HTML template, then the editor correctly highlights both HTML tags and PHP functions. The same applies to CSS and JavaScript/TypeScript code, which is contained in HTML files.

The program includes auto-completion function, which greatly speeds up the programmer’s work and eliminates the possibility of errors.

CodeLobster IDE provides contextual help on all supported programming languages, it uses the most up to date documentation at this moment, downloading it from official sites. So we can quickly get a description of any HTML tag, CSS attribute, PHP or JavaScript/TypeScript function by pressing the F1 key. 

The built-in PHP debugger allows you to execute PHP scripts step by step, sequentially moving through the lines of code. You can assign check points, view the process of the work of loops, and monitor the values of all variables during the execution of the script.

Other useful functions and features of the IDE:

  • A pair highlighting of parentheses and tags – you will never have to count parentheses or quotation marks, the editor will take care of it.
  • Highlighting of blocks, selection and collapsing of code snippets, bookmarks to facilitate navigation on the edited file, recognition and building of the complete structure of PHP projects – these functions ensure easy work with projects of any scale.
  • Support for 17 user interface languages, among them English, German, Russian, Spanish, French and others.
  • The program works on the following operation systems: Windows 7, Windows 8, Windows 10, Mac OS, Linux, Ubuntu, Fedora, Debian.

The professional version of CodeLobster IDE provides the programmer with even more features.

For example, you have an opportunity to work with projects on a remote server with use of the built-in FTP client. You can edit the selected files, preview the results and then synchronize the changes with the files on the hosting.

In addition the professional version includes an extensive set of plug-ins:

  • Fully implemented support for JavaScript (and TypeScript) libraries, such as jQuery, Node.js, AngularJS, AngularTS, BackboneJS, EmberJS, VueJS and MeteorJS.
  • A large set of extensions that help to work with PHP frameworks – CakePHP, CodeIgniter, Laravel, Phalcon, Smarty, Symfony, Twig and Yii plug-ins.
  • Plugins for working with the most popular CMS – Drupal, Joomla, Magento and WordPress.
  • Also CodeLobster IDE has special plug-in for Bootstrap.

We can download and install any framework directly from the program without being distracted from the main tasks.

In general, for a year of work, our team had no complaints against the editor. CodeLobster IDE works fast, does not hang and allows us to work even with large PHP projects.

You can download CodeLobster IDE from the original website http://www.codelobster.com/.

Deferring images for faster pages & Better Page Speed Score

1
2
3
4
5
6
7
8
9
10
<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="your-image-here">
<script>
function init() {
var imgDefer = document.getElementsByTagName('img');
for (var i=0; i<imgDefer.length; i++) {
if(imgDefer[i].getAttribute('data-src')) {
imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src'));
} } }
window.onload = init;
</script>

This simple trick that I got from here helped me speed up the loading time of a page really nice…

I use this trick only on the hidden images that I call via JavaScript/jQuery or to the images that normally don’t show up on the main screen(located at the middle and the bottom of the page…

CSS & HTML Only – Responsive background image in panel heading & Profile Photo

I made a simple example of a beautiful, responsive and fast panel with a responsive cover photo and a circle photo, this type of design I use on my projects when I wand to represent the TEAM page or CONTACT person.

You can simply modify the size and style of the panel, also, you can add or remove the shadow around the profile photo, change the background cover and the cute cat profile photo.

Check the Source of the demo and give it a try, if you have any other questions, you can simply drop me a line via email…

DEMO

Cosmin